css - How can we keep the font scaling up and down but make it not so context sensitive? -
deep project having problems use of em's in our font-size. have several markup modules reusing in different contexts. constant head aches calculated font-size being different in different contexts. using em's important using responsive design. scalability of font-size must have. please see jsfiddle
simple example. how can keep font scaling , down make not context sensitive?
inheritance can quite annoying, espcially when working ems. know context class names should able overcome problem applying simple maths.
let's take in .context1
ideal, css looks like:
.context1 { font-size: 1em; } .context2 { font-size: 1.5em; } .my-font-size { font-size: 3em; }
in case, first heading 3em
, second 4.5em
because parent defined being 1.5x bigger. around this, following:
.context1 { font-size: 1em; //default font size .context1 } .context2 { font-size: 1.5em; //default font size .context2 } .my-font-size { font-size: 3em; //default font size .my-font-size } .context2 .my-font-size { font-size: 2em; //adjust font size parent's value (3/1.5) }
similarly, define .context2
norm:
.context1 .my-font-size { font-size: 4.5em; //(3 * 1.5) }
Comments
Post a Comment