Use examples to learn the relative units of CSS – Em, Rem, VH, and VW ✨✨

• Learn CSS Units — Em, Rem, VH, and VW with Code Examples ✨✨
• Originally written by Joy Shaheb
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: Hoarfroster

Today we will learn how to use the four units of CSS (EM, REM, VW, VH). We’ll start our tutorial with some very practical examples and learn how to use these units to build responsive websites.

Let’s get started! 💖

Why should we learn the relative units of CSS

If you want to build responsive websites easily, quickly, and efficiently, you should definitely learn the relative units of CSS.

**REM, EM, VW, and VH are all relative units in CSS. ** If you can combine these relative units with media queries, then you can make great scalable layouts. Check out this GIF below at 👇, where text ADAPTS to screen size on desktop, tablet, and phone screens.

We should always remember that pixels are absolute units! They don’t change the size of the window when we scale it. Take a look at the GIF 👇 below and notice that the 50px font size does not change when we zoom in and out of the window.

Tip: Before starting this tutorial, I recommend that you not think of EM and REM as one unit, but as a multiple of the base size.

Start project

First, copy the Codepen Code and paste it into VS Code or your favorite Code editor, then follow the steps below 👇

• Create a folder project-1.
• Create HTML, CSS, JS files and link them together.
• Install the plugins we need – PX to REM and Live Server.
• Run the Live Server.

As you can see in the GIF above 👆, JavaScript does all the calculations, so we just need to focus on the tutorial itself. We’ll change the CSS and run the tests to see what’s different.

Let’s start coding

What is REM unit?

The REM unit is based on the root element of the document (that is, < HTML >) and here is a picture showing how it works 👇

In HTML, the default text size for the root directory is 16px, so 1REM = 16px.

If we assign 3rem to a property, we are actually telling the browser that the size is 3*16px = 48px. So, as you can see, it’s really like a multiplier with respect to cardinal units.

However, if we change the font size of the root element, the REM unit also changes, as in 👇

We have now set the text size of the HTML element to 50px.

So, if we write down 3rem, the actual result is 3*50=150px, as in the following 👇

Let’s re-implement this result with this code, and then look at their use case in action 👇

First, let’s use the default text size for all web sites, which is 16px, to start our test. Also, we will set the font size of the.text class to 1rem.

html {
  font-size: 16px;
}

.text {
  font-size: 1rem;
}

/** Calculations 1 rem * 16px = 16px **/
Copy the code

Here are our results 👇

Let’s increase the size of.text to 2 rem:

html {
  font-size: 16px;
}

.text {
  font-size: 2rem;
}

/** Calculations 2 rem * 16px = 32px **/
Copy the code

This is the corresponding result 👇

As you can see, the text is a bit larger, but the width remains the same (1536px).

What about changing the text size of the root element

Now let’s see what it looks like to change the text size of the root element. Start by writing this code to see the default result 👇

html {
  font-size: 16px;
}

.text {
  font-size: 1rem;
}

/** Calculations 1 rem * 16px = 16px **/
Copy the code

This is the result 👇

Now, change the text size of the root element to 48px, like this:

html {
  font-size: 40px;
}

.text {
  font-size: 1rem;
}

/** Calculations 1 rem * 40px = 40px **/
Copy the code

This is the result 👇

Let’s change the text size of.text to 2 rem 👇

html {
  font-size: 40px;
}

.text {
  font-size: 2rem;
}

/** Calculations 2 rem * 40px = 80px **/
Copy the code

Then this is the result 👇

Since we changed the text size of the root element to 40px, when we changed the text size of the.text, the actual text size should be 2*40 = 80px.

How to use REM units to make responsive websites

Creating a responsive web site using REM units is very simple. We just write our site size in REM units (instead of using pixel units then) and then use media query to set different sizes for the root element based on different window size breakpoints.

Here is an example of how to add media queries for a responsive layout 👇

// large screen

@media (max-width: 1400px) {
  html {
    font-size: 25px;
  }
}

// Tablet screen

@media (max-width: 768px) {
  html {
    font-size: 18px;
  }
}

// Mobile screen

@media (max-width: 450px) {
  html {
    font-size: 12px; }}Copy the code

Now, let’s set the.text text size to 3rem, like this:

.text {
  font-size: 3rem;
}
Copy the code

This is the result 👇

Here are some calculations

• Large screen -> 3 REM * 25px = 75px
• Tablet -> 3 REM * 18px = 54px
• Phone screen -> 3 rem * 12px = 36px
• Default Settings -> 3rem * 16px = 48px

What are EM units?

EM units are very similar to REM units in that only EM cardinal units look at the immediate parent element, not the root element of the page. Here is an example 👇

Note: Make sure you delete all media queries.

html {
  font-size: 16px;
}

.text {
  font-size: 3em;
}

/** Calculations font-size should be 3 em * 16px = 48px **/
Copy the code

This is the result 👇

Now let’s try adding a 3em inner margin to the.text class:

html {
  font-size: 16px;
}

.text {
  font-size: 3em;
  padding: 3em;
}

/** Calculations text => 3em * 16px = 48px padding => 3em * 3em * 16px = 144px **/
Copy the code

The element we obtained has a 144px inner margin instead of 48px. As you can see, the actual value is equal to the product of the base and multiplier of the parent element.

Here is the computing section in the console 👇

Do not use EM units 😵❌

Using EM units, in fact, is not worth it because:

• You’re more likely to miscalculate.
• You need to write a lot of code in your media queries so that your site ADAPTS to all screen sizes.
• It would take too long.

What are VW units?

VW unit is viewport width. It works like a hundred percent unit. Defining a 10VW is equivalent to occupying 10% of the total visible width.

To test the results, make the following changes in your CSS: 👇

Note: Comment out the last line of.box as follows:

.text {
  display: none;
}

.box {
  width: 50vw;

  height: 300px;
  /* display: none; * /
}
Copy the code

If you read the above carefully, you should know that 50VW means 50%, which is half of the screen.

In the JavaScript section, uncomment the last line 👇

// Box Width & height

box.innerHTML = "Width : " + Box_width;

// box.innerHTML = "Height : " + Box_height;
Copy the code

Now the result should look like 👇

As you can see, elements always take up half the width of the screen — even if we zoom the window.

What are VH units?

Like VW, its full name should be window height, and it is also a unit that works like a hundred units. Define 10Vh as occupying 10% of the screen height.

Take a look at the following example to see how it works 👇

.text {
  display: none;
}

.box {
  width: 300px;

  height: 50vh;
  /* display: none; * /
}
Copy the code

As mentioned above, 50vh is immediately interpreted as 50%, which is half the height of the screen.

In JavaScript, uncomment the last sentence 👇

// Box Width & height

// box.innerHTML = "Width : " + Box_width;

box.innerHTML = "Height : " + Box_height;
Copy the code

And make the following modification 👇

// Screen Size (Width & height)

// size.innerHTML = "Width : " + Width + " px";
size.innerHTML = "Height : " + Height + " px";
Copy the code

Here are the results 👇

As you can see, it always takes up 50% of the height — no matter how much we stretch the window.

This is the corresponding unit in CSS.

summary

Congratulations to you! Now I’m comfortable with REM, EM, VW and VH applications! You can now use them to build perfectly responsive websites!

Here’s your medal ~ 🎖️ Congratulations on successfully reading the end of this article. ❤ ️

Additional resources

• Complete Media query tutorial

Thank you

• Material from Freepik

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

---

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.