What is vh in height?

Let's start. 💖

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

REM, EM, VW, VH are relative units. If you Combine these with media queries, then you can make perfectly scalable layouts. Look at this GIF 👇 The text is responsive on desktop, tablet, and mobile screens!

Keep in mind that pixels are absolute units. They won't change when you resize the window. Look at this GIF 👇 Notice that the font size of 50px doesn't change when we resize the window.

Tip: Before starting the tutorial, I suggest that you don't think of EM and REM as units. Think them as multipliers of a base number.

First, copy the code from this Code Pen link and paste it into VS Code or your code editor of choice. Then follow these steps:👇

As you can see in the gif above, 👆 the JavaScript is doing all the calculations, so we just need to focus on the tutorial. We will just change the CSS and experiment with different values.

Let's start coding!

The REM unit depends on the root element [the HTML element]. Here's an image to show you how it works:👇

The default font-size of the root element [in HTML] is 16px. So, 1 REM = 16px.

If we write 3 rem, it will show us [ 3*16px = 48px ]. So as you can see, it works like a multiplier.

But, if we change the root element font size, the REM unit changes – like this: 👇

We're setting the HTML font-size to 50px.

Now, if we write 3 rem, it will show us [ 3*50px = 150px ] like this: 👇

Let's recreate the results with code and see their use cases in practice. 👇

First, let's experiment with the default font-size of every website, which is 16 pixels. And we'll set the .text class font-size to 1 rem.

Here's what the result looks like:👇

Now, let's increase the .text font-size to 2 rem:

And here's the result: 👇

As you can see, the font size gets bigger but the width stays the same (1536px).

Now, let's experiment by changing the root font-size, which is inside the html. First write this code to get the default result: 👇

Here's what that looks like:👇

Now, change the root font-size to 40px like this:

Here's the result:👇

Now, change the .text font size to 2 rem: 👇

And you can see the result: 👇

Since we changed the root font size to 40px, when we change the .text font size to 2 rem, we get 2*40 = 80px.

Making responsive websites with the REM unit is very easy. Just write your styles in rem units instead of the pixels and change the root elements at different breakpoints using media queries.

Here's a demo that shows you how it's done👇 and how to add the media queries:

Now, set the .text class to 3 rem units, like this:

And here's the result: 👇

The EM unit is the same as the REM unit but it depends on the parent font size. Here's a demo. 👇

Note: make sure you remove all the media queries.

Here's the result: 👇

Now, let's try adding 3em padding to the .text class.

Instead of being 48px of padding, we are getting 144px padding. As you can see, it is getting multiplied by the previous number.

Here's the computed part from the developer console: 👇

Using the EM unit is not worth the effort because:

The full form of VW is viewport width. It works like the percentage unit. Specifying 10vw is equivalent to occupying 10% of entire visible screen width.

To experiment with the results, make these changes in your CSS👇

Note: comment the last line on the .box class.

If you look carefully, you can see that 50vw means 50%, which will cover half of the entire screen width.

In the JavaScript part, uncomment this line at the very end: 👇

The result looks like this:👇

As you can see, that element will always cover that much space even if we resize the window

The full form of VH is viewport height. It works like the percentage unit as well. Specifying 10vh is equivalent to occupying 10% of entire visible screen height.

Look at this demo to see how it works:👇

If you look carefully, you can see that 50vh means 50%, which will cover half of the entire screen height.

In the JavaScript part, uncomment this line at the very end: 👇

Also, make these changes:👇

And here's the result: 👇

As you can see, it will always cover that much space even if we resize the window.

That's it!

Congratulations! Now, can confidently use the REM, EM, VW, and VH units to make perfectly responsive websites.

Here's your medal 🎖️ for successfully reading till the end. ❤️

The full form of VH is viewport height. It works like the percentage unit as well. Specifying 10vh is equivalent to occupying 10% of entire visible screen height.