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.