Menu
I was reading about rem units in CSS3, and was a little confused. If you use rem, do you still use em or does that replace it?
For example:
.selector {
margin-bottom:24px;
margin-bottom:2.4rem;
font-size:16px;
font-size:1.6rem;
}
or
.selector {
margin-bottom:24px;
margin-bottom:2.4em;
margin-bottom:2.4rem;
}
Just trying to figure out if rem takes the place of em, or if it's just another unit.
470
em vs rem, Which is Better? There's no better unit really, and it all depends on your personal preferences. Some people like to design everything in rem units for consistency and predictability, while others like to also use em units in places where the influence of nearby parent elements would make sense.
Use EM where you have to make more scaling than the root font size. And use REM where you need value according to the root there you can use REM units.
em and rem are font-based relative units and it's different to use ems for fonts or for length, so both ems and rems are font-based but the difference between them is that ems use the parent or the current element as a reference while rems use the root font size as the reference.
EM is relative to the parent element's font size, so if you wish to scale the element's size based on its parent's size, use EM. REM is relative to the root (HTML) font size, so if you wish to scale the element's size based on the root size, no matter what the parent size is, use REM.
Rem is the em size for the root (html) element. That means once you define the html element's font-size, you can define all rem units relative to that.
For example:
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
Rem is supported in Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer, but for older browsers you still have to use em, percent or px.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
