rem, px, mediaqueries for browsers >=IE9

Question

I have a project where IE9 is the minimal compatibility browser. That means that I can use the rem unit.

In my experience on large projects, involving many dev, the use of "em" creates quite a mess. I do not say that it is bad in itself, just that it seems to "naturally" happend on over time, when there is different people with varying skills working on a project. Dom elements tend to pile up, and that do not work well with the compounding behavior of "em".

After having looked at a lot of resources online, it seems that there is a lot of cargo cult on the question.

there is the temptation of solution 1: start with this (suggested here css3files.com comment - David Buell ):

solution 1 :

html {  font-size: 10px;}
body {  font-size: 1.3rem;}

Rem for anything text-related and px for the rest.

But even though, I am not sure where I am really contrained to use another unit than "rem". I did some zooming test, and did not notice differences between "rem" and "px". The advantage of "rem" over "px" seems to be that "rem" will be relative to the a size set with "%" on the body, and this allows to change all text sizes in one line for a specific breakpoint.

Default text size change IS seemingly an issue, since "px" and "rem" text remains unchanged. But I wonder is there is usage statistics about this (this SO user thinks nobody). If it is really used then, I think I should drop the "easy math" font-size definition on the html tag.

solution 2 :

body {  font-size: 0.8125rem;}

That gives 13px size with the browsers default size of 16px - and users can still change the default setting. (and maths aren't that hard starting with 16)

What I am really unsure of is the case of different screen resolution, and the case of different pixel density (which I know can be changed on windows).

to sum up:

• No need to accomodate anything below IE9.
• reponsive design.
• handle zoom well.
• handle user text size change if that's really used.
• no magic, as barebone as possible (I use a css preprocessor but I want to avoid crazy use of it).

I think many frontend developer adapt their interface to browser zoom. But what is the practice with text-only zoom ? Its a somewhat more hidden browser feature. How many devs actually test it and code for it ?

I see that SO supports it but that it sorta breaks beyond a certain scale.

What the right base setup for a IE9+ interace, that supports responsive web design ?

thanks

-olivvv

Answer 1

I did some testing here : http://codepen.io/Olivvv/full/aGDzI

a few interpretations :

solution 1 : WRONG html { font-size: 10px;} prevents the permanent browser/user font-size setting to be applied. If the user has requested a bigger font-size,it should take effect.

See here with the SO website, things break a little with very big fonts, but at least the user gets the font-size increase.

solution 2: OK body { font-size: 0.8125rem;} is actually the same as body { font-size: 0.8125em;} since the can only inherit from the element "em" as the same value as "rem" ("rem" stands for root em, the em value of the root element, i.e the element)

solution 3: INTERESTING

html{font-size: 62.5%;}
body{font-size: 1.6em;}

---> 1 rem == 10px (if the browser is set to default, i.e 16px; - (62.5/100)*16 == 10)

Now about the possible strategies :

1. rem only

html{font-size: 6.25%;}
body{font-size: 16em;}

+ only working with rem; for font-size, width, padding, margin, borders. This seems to be the easiest way to go. Here 1 rem equates to 1px in defaut setting. It responds to user change of the default setting, so it is accessible. When doing responsive design, the interface can be zoomed by changing the % value of the . for instance:

html

the whole interface is zoomed. Zoom is vertical and horizontal.

div.foo{
font-size: 16rem;
border: 16rem solid;
width: 350rem;
border-color: limegreen;

}

That will create a box that expands both vertically and horizontally.

Issue: What about vertical zoom ?

2. rem and em (in order to get vertical zoom)

rem -> interface elements, width essentially

em -> text (can be resized independently from interface elements (which are in rem) by changing the font-size value on the body)

px -> seperators, borders essentially

This way we achieve interfaces that respond well to both browser zoom and browser font-size setting

Some comments on ideas read on some blogs and

"just use px, if your brain works in pixel" --> Very Wrong. Font-size in px will be unreadable for some users who have explicitely requested bigger font size. (and what about dpi different from 96 ?)

"layout in em" --> average wrong, since a different user font size will make appear horizontal scrollbars or not use the full viewport space. Such behavior relates to zoom, not font size. (note that I am not considering browsers older than IE9 - just let them fall back on their default values )

Answer 2

keep a rule - All font sizes must be specified using rem only with a pixel fall back. Do not use percentages, ems or pixels alone.

font-size: 14px; /* pixel fall back rule should come first */ font-size: 1.4rem;

more infor - https://github.com/stubbornella/oocss-code-standards