Difference between em-calc and rem-calc
I have used the em-calc
Zurb Foundation for sizing CSS in my projects. However, I recently noticed that developers are increasingly using rem-calc
.
I know what each function does, but I don't understand when I should use em-calc
or rem-calc
.
What is the difference between these two functions?
source to share
Actually your question is some kind of duplicate How is it different from em in CSS? (and Practical difference between rem and em units ) etc.
em-calc()
returns the em value of your input in pixels, while it
rem-calc()
returns the return units. In practice, this means that when a rem-calc()
selector is used to set the font size, the font size depends on the font size of the attribute html
instead of its direct parent.
You can see the difference 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 above will look like the image below:
Now change the font size of the tags section
:
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); }
}
Note that due to both tags section
are direct parents body
using rem-calc(48)
or rem-calc(48)
for the font size section
in the above example will not make any difference for this example.
The result will now look like this:
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 elements of your page structure (header, footer, content, navigation, etc.) and em-calc()
for an element nested within the previous main elements.
So for example use here:
section {
font-size: rem-calc(20);
small { font-size: em-calc(10); }
}
source to share