rem-unit.md

What is REM in CSS?

Hey guys, I was talking to Bo and we were thinking about start using rem unit on the projects, because it's more responsible.

The main difference between rem and em is that em is relative to element's closest parent font-size, e.g:

HTML:

<div class="parent">
    <span class="parent__element">Hey!!!</span>
</div>

CSS:

.parent {
    font-size: 10px;
}

.parent__element {
    font-size: 1em; // In this case, 1em = 10px. So, 1.3em = 13px
}

And rem is relative to the page's root(html tag). e.g:

CSS:

html {
    font-size: 100%; 
    // Set it by 100% is a good practice, because it allows browser decide 
    // which font-size is better to improve the page's readability, 
    // based on the current device.
    // Desktop's default font-size is 16px. 
}

.parent__element {
    font-size: 1rem; // So, if the showing device were a desktop, then 1rem = 16px.
}

Using rem as the default unit size for all elements allow us to always delivery the best size of an element based on it's display device, like a tablet or a smartphone. It also reduces a lot of effort when we're doing responsible adjustments.

One easy way to use it without calculating it every time is by installing the sass-rem dependency, which takes font-size: rem(16px) and automatically converts to font-size: 1rem.

Take a look: https://github.com/pierreburel/sass-rem

nikkaroraa/rem-unit.md

What is REM in CSS?