REMs PXs and break points

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.

Thanks for any help


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What browser do the non-apple tablets run?


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Walter

On Jan 22, 2014, at 6:30 PM, Ernie Simpson wrote:

What browser do the non-apple tablets run?


Ernie Simpson


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Caleb

Thanks for that. Thinking aloud:

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.

Thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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 */
}

And that is the beauty of the REM.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you. That’s explained it.

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.

Mark


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options