Scale the entire page with font-size

[dinis]

Hi,

There are some articles about using html{font-size: 62.5%} body{font-size: 1.4rem}, the base 10 trick (not be confused with body{font-size: 62.5%}). Sure the base 10 is useful, and what about scalability?

My intention is to use it to scale all (width, height, margins … all rem units), with only the change of one property in @media. Is it safe? or is totally hacky my intention? There is a better approach?

Example Code:

html {font-size: 58.3%;}

@media (min-width: 60em) {
    html {font-size: 62.5%;}
}

@media (min-width: 78em) {
    html {font-size: 66.6%;}
}

body {font-size: 1.5rem;}

In this exemple the font-size wild be: 14px -> 15px -> 16px, adds one pixel every step, not only font-size but also to all rem elements.

ps – I am aware of this bug.

sorry for my bad english.

[dinis]

Thanks gcyrillus, it is a great idea. The support is a little worse of rem units and has some issues in ie 9 and 10 ( nothing new), I will study it.

And about the above example, any thought?

[Author]

Posts