the difference between em-calc and rem-calc
I've been using em-calc for CSS size definitions in my Zurb Foundation projects so far. However, recently I've noticed developers using rem-calc more and more.
I know what each function does, but I don't really understand when I should use em-calc or rem-calc.
What is the difference between these two functions?
Answer
Well in fact your question is some kind of duplicate of How does rem differ from em in CSS? (and Practical difference between rem and em units) and so on
em-calc() returns the em value of your input in pixels, whilst
rem-calc() returns rem units. In practice that means that when you use rem-calc() to set the font-size of a selector the font size is relative to the font size of the html attribute instead of its direct parent.
You can see the diffence in the following example:
html
<body>
<section> section text
<small>small text</small>
</section>
<section class="rem"> section .rem text
<small>small text</small>
</section>
</body>
sccs
section {
font-size: em-calc(24);
small { font-size: em-calc(12); }
}
section.rem {
font-size: rem-calc(24);
small { font-size: rem-calc(12); }
}
The result of the above will look like that shown in the image below:
Now change the font size of the section tags:
section {
font-size: em-calc(48);
small { font-size: em-calc(12); }
}
section.rem {
font-size: rem-calc(48);
small { font-size: rem-calc(12); }
}
Notice that because of both section tags are direct parents of the body using rem-calc(48) or rem-calc(48) for the font-size of the section in the above wont make any difference for this example.
Now the result will look like as follows:
As you can see, the font size for the small does not scale with its parent.
Personally i think you should use rem-calc() for the main structure elements of your page (header, footer, content, navigation etc.) and em-calc() for the element nested in the preceding main elements.
So for the example use here:
section {
font-size: rem-calc(20);
small { font-size: em-calc(10); }
}