I would like to use REMs. I intend to set the body { font-size:10px; } This makes it very easy for me to calculate sizes. Then at certain smaller break points I intend to make the body font-size smaller. Hence by changing one line of code all my font sizes, line heights, margins and padding etc will change.
I understand to work on older IE I have to specify PX together with REM. Would I have to do this twice? On the “original” font styles and on the smaller font-styles (after changing the body font-size). If so, this negates the above benefit of using REM.
What I might do, is specify PX as a fallback to the REM measurements, only on the “original” styles. Then at break points change the body font-size (which my REM is based on), but not bother to go through every single style and add in PXs. I presume this means that after my break points the text on older IE will not change? But hey, that won’t apply to many people - the break points are more for tablets and phones.
Most use WebKit (but not MobileSafari, so standards-based, but not the same as iOS), Windows 8 uses IE, you can install Chrome or Firefox (both standards-based) on many.
What I might do, is specify PX as a fallback to the REM measurements, only on the “original” styles. Then at break points change the body font-size (which my REM is based on), but not bother to go through every single style and add in PXs.
That is what I would do. IE8 and below will ignore the CSS inside breakpoints anyway, and IE9+ supports REM as a size unit. I figure that if anyone is using a browser less standards compliant than IE8, they are on a desktop and are accustomed to a sub-par browsing experience.
I need to specify pixels for IE8 and below because they don’t support REM. Fortunately(!) neither do they support media queries, so I don’t have to specify pixel sizes for all my styles at every break point. IE8 and below users just won’t get any of the responsive stuff - but then they are probably using a desktop, so can just make their window bigger.
Do I make the html or body font-size:10px? Seems to be different ways of setting my root value.
Do I make the html or body font-size:10px? Seems to be different ways of setting my root value.
You should set both, actually, to different values.
REM is relative to the <html> element, so if you want 1rem to equal 10px, you need to set the font-size of <html> to 62.5%.
The problem with this is that any unstyled text on the website will default to 1rem/10px through inheritance, which is far to small for good readability. Now, if you are careful to style all your text with the font-size property, this usually isn’t much of an issue with a Freeway created website, but can rear it’s ugly head on occasion.
To solve this, we should set the font-size of the <body> to 16px/1.6rem. Because the <body> element is inside the <html> element, the font-size applied to to <body> will take over the styling of unstyled text. However, because REM is always relative to only the <html> element, 1rem will still equal 10px for all your styling purposes.
Here’s the CSS to do that:
html {
font-size: 62.5%; /* cause 1rem = 10px */
}
body {
/* unstyled text will get this size: */
font-size: 16px; /* fallback for IE8 & others */
font-size: 1.6rem; /* REM value for modern browsers */
}
I’m loving REMs - I like the way I can quickly proportionally resize everything. Obviously some styles require a bit more attention, but broadly speaking it works a treat.