Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

What is REM in CSS?

This article is about one of these values, REM, which stands for Root EM. REM is the value length of the value/data type. The other value of length is our old friend Pixel (px). Each property that accepts length as a value will accept REM. Some of them are margin,padding, etc.

Why, you might wonder, should REM be considered? Let’s see why in the next section.

The relative value and absolute length value in the CSS

The CSS has two types of length values: absolute length value and relative length value.

Absolute length value

Examples of absolute length values are :(1/96px inch), in (one inch), or cm (37.8 pixels or 25.2/64 inches). You can find more information about these values in MDN.

When you use these length values, you can be sure that they are always more or less the same size. This is especially useful when you know the exact size of the output (mainly for print layouts). But if that’s not the case, it’s less useful, like all different screen sizes.

And don’t forget that people may use different browser Settings, whether because of preferences or accessibility requirements.

Relative length value

The relative length value is defined in terms of some other value. For example, they are REM, EM, and VW. We’ll discuss REM in detail below, so let’s briefly discuss the others.

EM is defined relative to:

  • The font size of the parent element when referring to attributesfont-size, as well as
  • When we deal with other attributes (e.gheight.

Vw represents 1% viewport width. That is, if the width attribute is defined as 10vw, the element takes up 10% of the available viewport width. There’s more, and you can find them here.

These relative length values have a distinct advantage over absolute values because they can help your site respond. That is, your website automatically ADAPTS to the available screen size and adjusts in a predictable way.

Root EM and root font size

REM is defined relative to the font size of the root element. The root element is matched by :root pseudoclass or HTML selector.

1rem therefore uses the value assigned to the font-size root element. This means that 1 REM remains the same value throughout the CSS code. If the user does not change the font size of the root element, this value is usually 16px.

Here’s an example:

html {
	font-size: 18px; // default value would be 16
}

h1 {
 	font-size: 2rem; // 2 * 18px = 36px;
}
Copy the code

2REM reasoning px backwards from TO is not a difficult task. But do you need a calculator nearby to know the exact font size (16 * 1.125:18px) of the subheading you set to 1.125rem?

Thankfully, there is an ingenious way around this problem. Keep in mind that you can also specify the font size for the root element using percentages (%), and the developers found that 62.5% of the default value for the root element is equal to 10px. This simplifies things nicely:

HTML {the font, size: 62, 5%; // 16px * 0.625 = 10px; } h1 {font-size: 1.8rem; // 10px * 1.8 = 18px; }Copy the code

Using REM (or some other relative length value) is necessary for font-size accessibility because px does not resize when the browser Settings change in some browsers.

For example, some people may need 400% magnification to read your text due to visual impairment. With REM, you can ensure that your text meets these requirements, because the font size is defined relative to the default font size chosen by the user.

Responsive Web design using REM

Let me start by saying that responsive web design is a broad topic with many different aspects. FreeCodeCamp course has two about responsive web design certificate (if you are interested in, please check on www.freecodecamp.org/learn these certificates).

Next I’ll focus on how REM helps make web pages responsive.

In this article on responsive Web design, Google encourages you to limit the line length to no more than 10 words. This is consistent with the classical readability theory.

They suggest that you should use media queries with breakpoints so that the width of your content/text line is not too long. This helps provide the best reading experience.

Here’s an example inspired by this article by Adrian Sandu:

html { margin: 0; padding: 0; The font - size: 62.5%; } #divOne { width: 100%; box-sizing: border-box; The font - size: 1.6 rem; Padding: 0.5 rem; background-color: lightblue; } @media (min-width: 27.1875rem) {// First breakpoint: 27.1875*16px= 435px p {font-size: 1.6rem; } #divOne {width: 41.8rem; background-color: yellow; margin: auto; }} @media (min-width: 40.78125rem) {1.5 * first breakpoint: 653px p {font-size: 2.4rem; // font-size first breakpoint} #divOne {width: 62.7rem; // 1.5 * width of first breakpoint background-color: green; Padding: 0.75 rem; // padding-bottom of first break point margin: auto; }}Copy the code

You can view this code on CodePen. Change the size of the viewport to see how the layout changes.

One thing you might notice in the code above is that the value in the 1rem defined media query is always 16px. The 1rem media query block internally follows the font size62.5% of the root definition of 16px, which is the same as the 10px we found earlier.

This behavior is due to the fact that REM in media queries always takes the default browser font size (usually 16px. However, if the user changes this default browser setting, REM takes this value. This means that the accessibility preferences that the user may have specified are accommodated.

The code uses a mobile-first design approach. I’m defining the first breakpoint 435px. Note that the width of the text after this breakpoint never changes, but the ratio of the values around it changes proportionally, 1.5 to be exact. Here’s an illustration of each step:

Layout with viewport smaller than 435px:

The container takes up 100% of the width of the mobile screen

435pxLayout of viewports between and652px:

Container keeps the text at about 10 words per line

Layout 652px when viewport is larger:

conclusion

In this article, we explore the use of REM in CSS. We see that REM is a relative length value that can be used to make logical patterns of font sizes within web pages.