Posted on • Updated on
Understanding VW Unit In CSS
In this article we will discuss the purpose, advantages and use cases of VW (Viewport width) unit in CSS layout.
What is vw unit?
vw stands for Viewport Width which is a relative measurement unit that represents a percentage of the width of the viewport. The number placed before vw is the percentage of the width of the viewport this length will be. For example if you use 10vw then this would represent a length of 10% of the width of your viewport.
The viewport is just a word for the size of your screen, so if you were on a large desktop with a width of 1920px, 10vw would represent 192px. If you were instead on a mobile device with a width of 360px, then 10vw would only be 36px.
1vw means 1 percentage of the screen's width.
The units differ from percentages because they are always relative to the viewport, whereas a percentage is relative to the element's parent container.
This means that, unlike all other unit types, viewport width is not in any way related to the base font size. This difference is significant and makes the units unique.
Where to use vw unit?
Fluid typography using vw automatically adjusts the font size to the width of the screen. Today we have a countless number of devices with different viewport sizes and fluid typography helps you to create a better design, regardless of screen size.
vw is useful for creating full width elements (100%) that fill up the entire viewport's width. Of course, you can use any percentage of the viewport's width to achieve other goals, such as 50% for half the width, etc.
Relative Units vs Absolute Units in CSS
We have mentioned that vw unit is a relative unit, so lets deep dive into CSS unit types, to understand what relative and absolute types mean.
Relative units
Relative units are defined in terms of some other value. These are, for example, VW, VH, REM and EM
VW stands for 1% viewport width. That is to say that if you define the width property as 10vw, the element will take up 10% of the available viewport's width.
VH stands for Viewport Height and is the exact same as vw but for the height instead of the width.
These relative length values have a clear advantage above the absolute ones, because they can help make your website responsive. That is to say, your website automatically adapts to the size of the available screen size, doing so in a predictable way.
Absolute units
Examples of absolute length values are: px (which is 1/96th of an inch), in (an inch) or cm (which is 37.8px or 25.2/64in).
When you use these units you can be sure that they will always be the same size. This is especially useful when you know the exact dimensions of the output, which is mostly with print layouts. But it's not so useful when this is not the case, like with all the different screen sizes out there.
Things to Keep in Mind with Viewport Width unit
Be careful when setting the width of an element using viewport units. This is because, when the overflow property on the root element is set to auto, browsers will assume that the scrollbars don't exist. This will make the elements slightly wider than you expect them to be. Consider markup with 4 div elements styled like this:
div {
height: 50vh;
width: 50vw;
}
Normally, you'd expect each div to occupy a quarter of the available screen. However, the width of each div is computed with the assumption that there is no scrollbar. This makes the div elements slightly wider than the required width for them to appear.
Changing the width of the divs from 50vw to 50% will solve this problem. The conclusion is that percentages should be used when setting width for block elements so that the scrollbars don't interfere with the computation of their width.
VW Key Points
vwstands for viewport width. It represents a percentage of the viewport's width, and it is equivalent to 1% of the viewport width.- Frequently used for responsive designs where elements scale with the width of the viewport, and it ensures adaptability and optimal layout presentation on diverse screen sizes.
vwunits are employed for creating dynamic horizontal spacing between elements. Offers consistency in spacing relative to the width of the viewport.- Setting the width of a container to
50vwcreates a design that occupies half of the viewport width.
VW conversion tables
The viewport size is 1920px in the following examples
vw converted to different units:
| 1vw | 10vw | 50vw | 100vw | |
|---|---|---|---|---|
| px | 19.2px | 192px | 960px | 1920px |
| pt | 14.4pt | 144pt | 720pt | 1440pt |
| in | 0.2in | 2in | 10in | 20in |
| pc | 1.2pc | 12pc | 60pc | 120pc |
| cm | 0.508cm | 5.08cm | 25.4cm | 50.8cm |
| mm | 5.08mm | 50.8mm | 254mm | 508mm |
Different units converted to vw:
| 1 | 10 | 50 | 100 | |
|---|---|---|---|---|
| px | 0.052vw | 0.521vw | 2.604vw | 5.208vw |
| pt | 0.069vw | 0.694vw | 3.472vw | 6.944vw |
| in | 5vw | 50vw | 250vw | 500vw |
| pc | 0.833vw | 8.333vw | 41.667vw | 83.333vw |
| cm | 1.968vw | 19.685vw | 98.425vw | 196.85vw |
| mm | 0.197vw | 1.968vw | 9.842vw | 19.685vw |
Conclusion
vw is a relative unit that represents a percentage of the device's viewport width, which is commonly used in making responsive designs.
FAQs About CSS Viewport Width Unit
We'll end by answering some of the most frequently asked questions about CSS viewport width unit.
What is the vw unit in CSS?
The vw unit in CSS measure the viewport width. The viewport is the area of the browser in which a website is displayed. The vw unit allows you to easily measure the width of the viewport and size elements in relation to this visible area.
How do viewport width unit work?
Viewport units are based on a percentage of the viewport's dimensions. For example, 1vw is equal to 1% of the viewport's width.
When should I use viewport width unit?
Viewport width unit is useful for creating responsive layouts and elements that adapt to the size of the screen's width. They are often used for fonts, spacing, and sizing elements in a way that ensures they look good on various screen width sizes.
What are some common use cases for viewport width unit?
Viewport width unit is commonly used for setting font sizes, creating responsive layouts, and ensuring that elements like containers adapt well to different screen width sizes.
How do I set a font size using viewport width unit?
font-size: 5vw; will set the font size to 5% of the viewport width. But fonts can become too large or too small on some screens. You can use the CSS calc() function (for example, font-size: calc(110% + 0.25vw);) or by using the CSS clamp() function (for example, font-size: clamp(1em, 10dvw, 15rem);).
How viewport width unit is being calculated?
vw is a relative unit of measurement used in CSS to define sizes and layouts on web pages. It represents a percentage of the width of the viewport or the visible area of the web browser.
The calculation for viewport width is straightforward: 1vw is equal to 1% of the width of the viewport
For example, if the width of the viewport is 1920px, then 1vw would be equal to 19.2px.
Viewport width unit is useful for creating responsive web design because it scales with the size of the viewport. As the user resizes their browser, elements specified in vw unit will adjust their size proportionally. vw makes it easier to create designs that look good on both desktop and mobile screens.
Can I use viewport width unit in combination with another unit?
Yes, you can combine viewport width unit with another CSS unit. For example, you can use vw for font-size and px for margin or padding.
Is viewport width unit supported for all browsers?
Viewport width unit is supported in modern browsers, including Chrome, Firefox, Safari, and Edge. You can read about support for viewport width unit in caniuse documentation.
How do I use viewport width unit in my code?
To use CSS viewport units, you simply include them in your CSS declarations. For example, if you want to set the width of an element to be 50% of the viewport's width, you would write: width: 50vw;. Similarly, to set the height of an element to be 70% of the viewport's height, you would write: height: 70vh;. You can also use vmin and vmax in the same way.
How do viewport width unit affect the layout on mobile?
On mobile, vw unit work in the same way as on all devices. However, the screen's width size is typically smaller on mobile, the actual sizes of elements specified in viewport width unit may be different.
Can I use viewport width unit for font-size?
Yes, viewport width unit can be used to set font-size. It can be used for creating responsive that scales with the screen's width. An example of vw unit use in typography: font-size: 5vw;
What is the difference between viewport width unit and percentage unit?
Both viewport width unit and percentage unit are relative units. Percentage unit is based on the size of the parent element, while viewport width unit is based on the size of the screen's width. This means that an element with a width of 50% will be half the width of its parent. An element with a width of 50vw will be half the width of the screen's width.
How do I handle viewport width unit in landscape mode?
In landscape mode, the viewport's width is swapped, so viewport width unit will be calculated based on the new dimensions. It can be used for creating designs that adapt to different orientations.
Can I use viewport width unit in print stylesheets?
Viewport width unit is mainly designed for use in screen media, so it may not work as expected in print stylesheets. For print, it's recommended to use absolute units like inches or points.
Related Blog Posts
Understanding EM Unit In CSS
Use cases of em in CSS. The purpose and advantages of em units, demonstrating ways to use em units to improve accessibility and mobile/desktop responsiveness of the website.
Understanding REM Unit In CSS
Use cases of rem (Root EM) in CSS. The purpose and advantages of rem units, demonstrating ways to use rem units to improve accessibility and mobile/desktop responsiveness of the website.