Viewport units in CSS are vh, vw, vmin, and vmax.

That part of the browser where website information is shown is called the viewport. Being able to measure that area is very helpful because it makes things that were hard to do easier, like setting the height of an element to the height of the browser window.

Main Points

Introduce Viewport Units: Learn about the flexible length units vh, vw, vmin, and vmax. These units change based on the browser viewport size and give CSS elements dynamic sizing options.
Uses of Viewport Units: Look into the different ways that viewport units can be used, such as to make fullscreen backgrounds, headlines that fit properly, and elements that are centred, which improves responsive design.
Thoughts and Conclusions: Find out what you need to think about when using viewport units, like how scrollbars and dynamic mobile viewports will affect your work, and find more tools to help you improve your CSS skills.

The Units and What They Mean

First, let us talk about what these numbers mean.

• Height of the window is shown by vh. The height of the viewport is used to figure out this measure. One vh number is equal to one percent of the viewport height. If you set the number to 100vh, it means that the viewport height is 100%.
• W is for “viewport width,” which is 1,w. The width of the viewport is used to figure out this measure. One vw number is equal to one percent of the viewport width.
• Viewport minimum is what vmin stands for. The viewport’s smaller size is used to figure out this measure. If the window width is less than the height, 1vmin will be equal to 1% of the viewport height. Also, if the width of the window is less than the height, 1vmin will be equal to 1% of the width of the viewport.
• Viewport maximum is what vmax stands for. The bigger size of the viewport is used to figure out this unit. This number will be 1% of the viewport height if the viewport height is greater than the width. Also, if the width of the viewport is greater than its height, 1vmax will equal 1% of the width of the window.

Some examples of values

Let us look at the value of these units in a number of setting:

• One thousand pixels wide and one thousand pixels high makes up the value of 10vw. The value of 10vh is one hundred pixels high. The 10vmax value will be 120px and the 10vmin value will be 100px because the viewport’s width is bigger than its height.
• When the device is turned around, the screen will be 1000px wide and 1200px high. This means that 10vh will be 120px and 10vw will be 100px. The 10vmax number will still be 120px, which is interesting, because it will now be based on the viewport’s height. In the same way, 10vmin will still have a number of 100px.
• If you change the size of the browser window so that the screen is 1000px wide and 800px high, 10vh will become 80px and 10vw will become 100px. It will also change the value of 10vmax to 100px and the value of 10vmin to 80px.

Viewport units may sound a lot like percentages at this point. But they’re not at all the same. When numbers are used, the child element’s width or height is based on its parent. This is an example:

In this case, the width of the first kid element is set to 80% of the width of its parent. The second child element, on the other hand, is bigger than its parent because its width is 80vw.

How vh, vw, vmin, and vmax can be used

It’s easy to use these units when you need to set the width, height, or size of an element in relation to the viewport because they are based on its measurements.

Images or parts that take up the whole screen or have viewport units

A lot of the time, background pictures are put on elements that take up the whole screen. In the same way, you might want to make a website where each part about a product or service takes up the whole screen. In this case, you can make the parts 100% wide and 100% tall.

To show what I mean, look at this HTML:

<div class="fullscreen a">
  <p>a<p>
</div>

Using the following CSS, you can make a background picture section that takes up the whole page:

.fullscreen {
  width: 100%;
  height: 100vh;
  padding: 40vh;
}

.a {
  background: url('path/to/image.jpg') center/cover;
}

Using viewing units to make headlines that fit perfectly

You can make headers take up the whole width of their parent element by using the FitText jQuery plugin. We already said that the size of the window has a direct effect on the value of viewport units. This means that your headings will fit properly on the screen if you set their font size using viewport units. The browser will instantly change the size of the headline text whenever the viewport width changes. All you have to do is find the correct initial number for the font-size in viewport units.

One big problem with this way of setting font-size is that the text will be very different sizes based on the viewport. When the viewport width is 1200px, the font size will be about 96px. When the viewport width is 400px, it will be about 33px, and when it is 1920px, it will be about 154px. The size might get too big or too small for easy reading because of this. This great piece about viewport unit-based typography has more information on how to properly size text using a combination of units and the calc() function. It also has information on how to do the same thing with the clamp() function.

Using viewport units to centre items

When you want to put something right in the middle of the user’s screen, viewport units can be very helpful. If you know how tall the element is, all you have to do is set the top and bottom values of the margin property to [(100 – height)/2].

.centered {
  width: 60vw;
  height: 70vh;
  margin: 15vh auto;
}

But now we have tools like Flexbox and CSS Grid that let us centre items both vertically and horizontally.

Viewport Units: Things You Should Know

There are some things you should remember if you choose to use viewport units in your work.

When you use window units to set the width of an element, be careful. This is because browsers will think there are no scrollbars when the overflow setting on the root element is set to auto. The elements will be a little bigger than you thought they would be after this. Take a look at markup that has four div parts styled like this:

div {
  height: 50vh;
  width: 50vw;
  float: left;
}

In a normal situation, each

would take up a quarter of the screen. The width of each div, on the other hand, is calculated as if there were no border. In this case, the div elements are a little bigger than what is needed for them to fit next to each other.

This problem can be fixed by making the divs 50% wider instead of 50vw. To sum up, you should use percentages to set the width of block elements so that the scrollbars don’t mess up the calculation of their width.

The address bar on mobile devices can also cause this problem because it can show up or go away based on whether the user is scrolling or not. This will change the height of the viewport, and the user will see sudden jumps in the information.

More window units, like svw, svh, lvw, lvh, dvw, and dvh, have been added to CSS to help with this. You can learn more about them in our in-depth piece on CSS sizing units.

In conclusion

We’ve talked briefly about what the vh, vw, vmin, and vmax viewport units mean and how they can be used in this piece. Read An Overview of CSS Sizing Units to learn more about window units and other CSS length units.

Our book CSS Master, 3rd Edition by Tiffany B. Brown can also help you get better at all of your CSS skills. It covers a lot of ground, including animations, transitions, transformations, and more.

A Brief History of CSS Viewport Units

Finally, we’ll answer some of the most common questions people have about CSS viewport units.

What does the vh number mean in CSS?

In CSS, the “viewport height” is measured by the vh number. A website is shown in the viewport, which is a part of the computer. The vh unit makes it easy to find out how high the screen is and how big elements are in relation to this area. For instance, it’s very simple to set an element to 100vh, which makes it the same height as the browser window.

In what ways do viewing units work?

The units for viewports are based on a portion of the viewport’s size. In this case, 1vw means 1% of the viewport’s width and 1vh means 1% of the viewport’s height.

When do I need to use viewing units?

You can use viewport units to make layouts and objects that change size based on the viewport. They are often used to make sure that parts look good on a range of screen sizes by setting fonts, spacing, and sizes.

How do I use CSS to change the height of the viewport?

Use the vh unit in CSS to set the height of the window. Select an element in your CSS stylesheet, like a

, and give it the height value like this:
div {
height: 100vh; /* This figures out the height
to half of the height of the window */
}

What are some popular ways that viewport units are used?

Viewport units are often used to set font sizes, make responsive layouts, create hero sections, and make sure that elements like buttons and containers work well on all screen sizes.

What’s the difference between 100% and 100vh?

In CSS, both 100vh and 100% are units of measurement used to say how big or small an element is, but they mean different things and are used for different things.
It doesn’t matter what’s on the page; 100vh is the full height of the window. When you set the height of an element to 100vh, it will take up the whole vertical height of the user’s screen. The text or other elements on the page won’t change this.
The number 100% is a relative one. If the dimensions of an element are set to 100%, it will take up all of the room inside its parent container. As it changes based on the size of the container, this can be used for both width and height. It also makes layouts more flexible and adjustable.
With vh, you can measure it without having to set a measurement on the parent element, which is a plus. If the parent element doesn’t already have a height set, setting an element to height: 100% won’t do anything.

How do I use viewing units to set the font size?

The vw unit can be used to set the letter size in viewport units. If you use font-size: 5vw;, the text size will be 5% of the viewport width. But be careful, because on some screens the sizes can get too big or too small. The CSS calc() function (for example, font-size: calc(112.5%) + 0.25vw);) or the CSS clamp() function (for example, font-size: clamp(2em, 8dvw, 12.5rem);) can be used to stop this.

What else can I use instead of 100vh?

Setting an element to a specific height isn’t always the best idea. Most of the time, it’s better to set this height to 100vh as a minimum. You don’t have to use 100vh to make an element’s height match the viewport’s height. There are other ways to do it.
To use 100% height instead of the window height, you can compare it to the height of the parent element. This works well if your element is inside another element that has a set height.
You don’t have to use exact height numbers when you use CSS Flexbox or Grid layout to make layouts that are flexible and responsive. With these layout methods, you can change how space is shared between child elements.
In some situations, you may need to use JavaScript to figure out and set the height automatically based on your needs, like the element’s content:
“.element” is the query selector for the text.
Parent is set to element.parentElement;
‘px’ plus parent.clientHeight in element.style.height;

How is the width of the window found?

In CSS, viewport width (vw) is a relative number used to set the sizes and layouts of web pages. It shows a proportion of the viewport’s width, which is the part of the browser that can be seen.
Simple math can be used to figure out the screen width:
– The number for viewport width is vw.
– 1vw is 1% of the viewport’s width.
In this case, 1vw would be equal to 10px if the width of the viewport (the computer window) is 1000px.
When making responsive web designs, viewport width units come in handy because they change sizes based on the window. When the user changes the size of their browser window, items whose sizes are given in vw units will change to match. It is now easier to make designs that look good on both big PC screens and small phone screens.

Can I mix and match viewing units with other units?

Yes, you can use other CSS units along with window units. One way to make a flexible design is to use vw for font size and px for padding or margins.

Do all browsers work with viewing units?

Modern computers, like Chrome, Firefox, Safari, and Edge, all work well with viewport units. But it’s important to test your ideas in a number of browsers to make sure they work the same way in all of them. The caniuse page has information about support for viewport units, such as some (minor) bugs that happen in some browsers.

What are the different kinds of viewing units in CSS?

Viewport units in CSS are a type of relative unit that is used to describe sizes and shapes in CSS. vw, vh, vmin, and vmax are the four different kinds of picture measures. The vw unit is equal to 1% of the viewport’s width, and the vh unit is equal to 1% of the viewport’s height. Any value less than or equal to vmin is equal to vmax. Any value greater than or equal to vmin is equal to vmax. It is especially helpful to use these units when making patterns that respond to different screen sizes.

How do I use window units in my code that are CSS?

You just add CSS viewport units to your CSS statements to use them. You would write: width: 50vw; for example if you want to make an element’s width 50% of the frame’s width. In the same way, you would put height: 70vh; to make an element’s height 70% of the viewport’s height. vmin and vmax can be used the same way.

What effect do CSS viewing units have on the layout on phones?

CSS window units work the same way on phones as they do on computers. But since mobile viewports are usually smaller, the sizes of items that are given in viewport units may not match up with their real sizes. This is why you should check your designs on a number of different screens and gadgets.

Can I set the font size using CSS viewing units?

Yes, you can use CSS viewing units to change the size of fonts. If you want to make lettering that changes size based on the viewport, this can help. Say you want the font size to be 5% of the width of the window. You would write: font-size: 5vw;.

What’s the difference between percentage units and screen units in CSS?

Percentage units and CSS viewport units are both relative units, but they figure out sizes in different ways. With viewport units, the size of the screen is used to figure out the size, not the size of the parent element. This means that a 50%-width element will always be half the width of its parent, and a 50vw-width element will always be half the width of the window.

How do I use CSS viewing units when the screen is in landscape mode?

When the viewport is in landscape mode, the width and height are switched, so CSS viewport units will use the new measurements to figure out sizes. This can help you make designs that work with different screen sizes, but if you don’t do it right, it can also lead to strange results. Always check your designs in both portrait and landscape view.

Can I use viewport units in print stylesheets that use CSS?

It’s possible that CSS viewport units won’t work right in print stylesheets because they were made to work with screen-based media. It’s better to use absolute units like points or inches in print stylesheets because they are more reliable and uniform across all printers and paper sizes.