I am designing a website using the CSS fluid layout (based on adaptive/responsive web design)
So I would not give anything as fixed value i.e. in px (only use %)
My question is ; While I do understand if I give the container a width of 100%, it would get calculated based on the browser window ( or viewport width) . But what about the font sizes like when we say 100% or 1 em for the body font, how will that be calculated ?
Also are the visible font-sizes going to be same on desktop as well as mobile devices ?
Relative font-size units are calculated from user default font-size, you have to use media queries if you want to adjust font-size from screen dimensions.
On mobile device text appears smaller because resolution is greater, be careful!
Related
I know we can make horizontally responsive content in ionic 2. What i want to know is how to make pages height responsive for all type of screens for example if a screen cover whole area on iphone 5 then it should cover whole height wisie area in iphone 7 also ? whats the best approach to achieve this ?
As some have already mentioned, you can use vh for the height property on your css. The catch here is that the viewport may change even if the screen orientation stays the same. This happens when you place an input in your app and it gets focus. The keyboard of the mobile device pops up on the screen, and the height of the viewport changes because the keyboard took part of it. f your mobile screen is 430x710 (some random number here) 1vh would be 7.1px, but when you tap on an input and lets say the keyboard is 430x300, now 1vh will be 4.1px (( 710 - 300 )/100)
That could be a real problem with responsive design. My advice is to use vw, the only thing that might alter it is the screen orientation (you can lock it). The extra step is that you have to use conversion to get the right number in vw that you wanted previously in vh.
I hope I have understood your question correctly, you want to make the page height the same as the height of the device viewing it?
Well, let me introduce you to....
viewport height (or vh)
One vh is equal to 1% of the height of the viewport. So, as you can probably imagine, 100vh would be equal to 100% of the height of the viewport! The viewport is basically the view of the page. However beware, the vh unit is not support in Internet Explorer 8 or earlier.
I hope you will get good idea to make the responsive properly from the follow parameters.
vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side
Actually vh is a perfect solution to make the responsive based on viewporot. The viewport is the area where the browser renders the site. This is your screen minus the reserved space of the browser chrome. Sometimes you want to size an element based on that viewport, like a sidebar. This can be done using a unit we’re all familiar with: percentages.
Currently working on my first highly responsive site. I've worked through a few basic tutorials about that topic, though I've often noticed that they rely on slightly older mobile devices and they switch the designs by #media depending on the screen size attributes.
Now we have mobile devices which have the same FullHD resolution on a 6" screen like on a 24" monitor... so that can impossibly work.
So what can I use to scale text and things like menus correctly? I'd like not to use percentage values absolutely everywhere.
My intuitive idea would be to compute a reference size of which I know that it has always the same size on the screen. Or at least something what can give me a hint of how to adjust the sizes.
I tried to used the "em" measurement in CSS for that by creating an element with this size and then measure it's height via Jquery, since from how I understood it, "em" is a browser-depending size.
Still the result is always 16px, no matter what browser I use...
So what type of relative size reference is usually used for this issue?
Thanks in advance!
You have differents units for relative length in CSS :
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport's smaller dimension
vmax Relative to 1% of viewport's larger dimension
% Relative to parent
The em and rem units are practical in creating perfectly scalable layout!
Source: http://www.w3schools.com/cssref/css_units.asp
You probably want to try using the min-device-pixel-ration media query (have a look at https://css-tricks.com/snippets/css/retina-display-media-query/)
If you have the same number of pixels on a 6" screen as you would normally get on a 24" monitor it is almost certainly going have a ration greater than 1 on the smaller screen. Otherwise it would be virtually impossible to read!
the default value for an em unit is 16px - however, you can reset this value to anything you want by changing it in the body tag.
body {
font-size: 1em;
}
So using that example 1em = 16px, 2em = 32px, 3em = 48px ect.
This website is a great resource for how to scale ems so you don't have to do the math: http://type-scale.com/
Keep in mind when using ems there is a compounding effect when using nested elements. So if you have a div with a font-size of 1em, inside of a div with a font-size of 2em, you will actually end up with a font size of 3em.
To prevent this you can either pay attention to your nesting, or use rem units. rem stands for root em and will always scale relative to the root element and ignore multiple nesting values.
While using foundation framework, I need to make font-size responsive.!The website has two columns 8x4. I have navigation and other links in 8 columns. The height of this block is stable. But, In the 4th column I have description and while opening in the different windows size I am seeing the different height of the description. I want that the height remain constant while changing the size of the screen by increasing the font proportionately.
I have tried media queries and assigned different font percentage for different screen size. 150% for max-width 1500 and font-size: 200% for font-size. But with this other features provided by foundation framework changes. Like paragraph bottom margins
I even tried vh, vw but same problem comes up. Please suggest some way to solve this issue.
Layout of the site
I think article might help you,
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
Or what you can do it start with a layout which supports equal + full height columns. Examples:
Equal Height Columns
Full Height Columns
_
Maybe using vm/wh units...
vw, vh and vmin (Copied from this page)
These new properties allow you to scale font sizes according to the viewport dimensions, i.e.
1vw is 1% of the viewport width
1vh is 1% of the viewport height
1vmin is the smallest of 1vw and 1vh
For example, assume your browser viewport is set to 1,000 x 1,200 pixels:
1.5vw = 15px font size
1.5vh = 18px font size
1.5vmin = min(1.5vw, 1.5vh) = 15px font size
HTH,
-Ted
I'm building a responsive website and I'm wondering what unit I should use? I've seen a lot of sites using pixels (px) for measurements and I've seen some using percent (%). Is there a preferred — or right — way of doing responsive design?
I've found percent to be hard to use, since it makes calculations hard and I've ended up with values like 2.754% and so on when setting widths/margins etc. Pixels seems easier, it's just simple addition and subtraction, but I've read that it isn't "future proof" or something like that and wont scale properly if the user zooms in the browser window. Is that still true?
If you have any experience or expertise, please share! I would love to hear what you guys have to say!
Thanks!
For layout type things like the sizes of boxes, you want to use % because you will typically have several columns sized as a percentage of their parent that will stack on top of each other at a certain breakpoint (width:100%). No other unit will allow you to fill 100% of the space like % does.
For padding/margins use em, normally you will want to space your elements out relative to the size of your text. With em (the with of an 'M' character) you can quite easily say I want approximately 1 character spacing here.
For borders you can use px or em, there is a difference though. If you want your border to look like it's one pixel wide on all devices, use 1px. It may not be one pixel on all devices however, high density displays convert 1px into 2px for example. If you want your border to be a size based on your font, use em.
For fonts use em (or %), the use of em carries through parents to children and it just a nicer unit to work with over px.
Of course you must use percentage. But with the min-height, max-height, min-width, max-width CSS keys.
For the next generation
vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height.
For responsiveness they are going to be the new units.
Use percentages along with min-width and max-width in pixels. This stops percentages making your divs too small or too large. eg
div {
width:100%; //full width of browser
max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding
}
For layouts vh and vw are good because they are relative to the device's view port. They give you the possibility of designing with the view port of the device in mind. With this said you know what will show on the window and what won't without being too careful.
For text em is best because if it's responsive features.
I am new to Div based Page Layouts. My questions is should we design div based page layouts using percentage or fixed pixel?
If percentage, what about cross browser compatibility?
If fixed pixels, what about different screen resolution? What screen resolution should we opt for?
Also, what should be the bases for our decision?
Most div based page layouts use fixed pixel widths, not percentages.
Using percentages has its advantages in very few scenarios - if you have a page that you want to change width based on window/browser, you'd use this. But I honestly can't think of the last time I saw a site that did this.
Fixed pixel widths allows you to actually design what your site will look like regardless of browser, screen resolution...etc.
When creating a layout with fixed widths, usually you create a "container" div that is around 960px wide (see http://960.gs/). This width is used because it fits most browsers/screen resolutions (eg - anything 1024x768 and above)
The "container" is usually centered on the page (though sometimes it's left aligned) - for examples, see msn.com, yahoo.com, stackoverflow.com ...etc. These are all fixed widths, not percentage (you can test this by changing the size of your window and seeing that their content does not change)