Understanding rem

To understand today’s topic, one should have a clear idea about rem unit and how it works. I’ll explain that first.

You must have seen the terms px, em and rem units when values are referred in css. All 3 of them serve different purposes and hence it is required that we should have a clear idea about each of them.

Apart from those, we also use units such as pt, pc, ex, vh, vw also. But for this particular explanation in order to understand rem unit, understanding the former 3 is enough.

px unit

#app {
    font-size: 16px;
}

px refers to pixels. It basically is an independent and an absolute unit. 1px is simply 1 pixel. 10px is 10 pixels.

em and rem are relative units.

em unit

<div class="App">
    <div class="text">xyz</div>
</div>
.app {
    font-size: 16px;
    .text {
        font-size: 2em; //similar to font-size: 32px
        padding: 2em; //similar to padding: 64px
    }
}

When em units are used, typographic property values such as font size are applied relative to the parent component's font-size. eg: In the above example font-size of the .text will be 32px (2 x 16px).

The other properties like padding, margin will use the font-size of the same component as the base unit. Eg: In this example, the padding of .text will be 64px (2 x 32px)

rem unit

<div class="App">
    <div class="text">xyz</div>
</div>
html{
    font-size: 12px;
}
.app {
    font-size: 16px;
    .text {
        font-size: 2rem; //similar to font-size: 24px (1rem = 12px)
        padding: 2rem; //similar to padding: 24px (1rem = 12px)
    }
}

rem unit refers to the font size of the html selector. Say if the font size of your html tag is 12px, 1rem will be equal to 12px throughout the project.

So in the above example, 1rem = 12px and the font-size and the padding values of the .text selector will be 24px each.

Now that you are familiar with the terminology, let's dive in to our topic.

Rem and the media tags

Media tags are written to tell the browser how the particular html element should behave in a given viewport size/range. What we generally do is we define each break point of each html element so that the element will size and align according to our plan. But this is a tedious process involving a lot of coding and there's also a risk of forgetting to put media tags for some elements. What I suggest is that we define the font-size of the html tag, refer it throughout the project as rem value and add media tags to the html tag font-size so that the unit size will increase and decrease making the whole website mobile responsive.

html{
    font-size: 14px;
    @media screen and (max-width: 1024px) {
        font-size: 12px;
    }
    @media screen and (max-width: 575px) {
        font-size: 10px;
    }
}

Now whenever you use rem unit to define a css property value, the value will auto adjust with the screen size. This few lines of code will help us from writing hundreds or thousands of lines of code unnecessarily.