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) } 

here's updated example.


Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

c++ - Clear the memory after returning a vector in a function -

erlang - Saving a digraph to mnesia is hindered because of its side-effects -