The browser’s viewport is that area of the browser in which website content is displayed. The ability to measure that area is very useful, as it makes once difficult tasks easy — such as setting an element’s height to that of the browser window.
Key Takeaways
- Introduction to Viewport Units: Gain an understanding of the responsive length units vh, vw, vmin, and vmax, which adjust based on the browser viewport size, offering dynamic sizing options for CSS elements.
- Practical Uses of Viewport Units: Explore the various applications of viewport units, including creating fullscreen backgrounds, perfectly fitting headlines, and centering elements, enhancing responsive design capabilities.
- Considerations and Conclusion: Learn important considerations when using viewport units, such as the impact of scrollbars and dynamic mobile viewports, and discover additional resources for advancing CSS skills.
The Units and Their Meaning
Let’s first look at what these units mean.
vhstands for viewport height. This unit is based on the height of the viewport. A value of1vhis equal to 1% of the viewport height. A value of100vhis equal to 100% of the viewport height.1vwstands for viewport width. This unit is based on the width of the viewport. A value of1vwis equal to 1% of the viewport width.vminstands for viewport minimum. This unit is based on the smaller dimension of the viewport. If the viewport height is smaller than the width, the value of1vminwill be equal to 1% of the viewport height. Similarly, if the viewport width is smaller than the height, the value of1vminwill be equal to 1% of the viewport width.vmaxstands for viewport maximum. This unit is based on the larger dimension of the viewport. If the viewport height is larger than the width, the value of1vmaxwill be equal to 1% of viewport height. Similarly, if the viewport width is larger than the height, the value of1vmaxwill be equal to 1% of the viewport width.
Some example values
Let’s see what the value of these units will be in different situations:
- If the viewport is
1200pxwide and1000pxhigh, the value of10vwwill be120pxand the value of10vhwill be100px. Since the width of the viewport is greater than its height, the value of10vmaxwill be120pxand the value of10vminwill be100px. - If the device is now rotated so that the viewport becomes
1000pxwide and1200pxhigh, the value of10vhwill be120pxand the value of10vwwill be100px. Interestingly, the value of10vmaxwill still be120px, because it will now be determined based on the height of the viewport. Similarly, the value of10vminwill still be100px. - If you resize the browser window so that the viewport becomes
1000pxwide and800pxhigh, the value of10vhwill become80pxand the value of10vwwill become100px. Similarly, the value of10vmaxwill become100pxand the value of10vminwill become80px.
At this point, viewport units may sound similar to percentages. However, they’re very different. In the case of percentages, the width or height of the child element is determined with respect to its parent
As you can see, the width of the first child element is set to be equal to 80% of its parent’s width. However, the second child element has a width of 80vw, which makes it wider than its parent.
Applications of vh, vw, vmin, and vmax
Since these units are based on viewport dimensions, it’s very convenient to use them in situations where the width, height or size of elements needs to be set relative to the viewport.
Fullscreen background images or sections with viewport units
It’s very common to set background images on elements that fully cover the screen. Similarly, you may want to design a website where each individual section about a product or service has to cover the entire screen. In such cases, you can set the width of the respective elements to be equal to 100% and set their height equal to 100vh.
As an example, take the following HTML:
<div class="fullscreen a">
<p>a<p>
</div>You can achieve a fullwidth background image section using the CSS below:
.fullscreen {
width: 100%;
height: 100vh;
padding: 40vh;
}
.a {
background: url('path/to/image.jpg') center/cover;
}Both the first and second image are taken from Pixabay.
Creating perfectly fitting headlines with viewport units
The FitText jQuery plugin can be used to scale headlines in such a way that they take up all the width of the parent element. As we mentioned earlier, the value of viewport units changes directly based on the size of the viewport. This means that, if you use viewport units to set the font-size for your headings, they’ll fit perfectly on the screen. Whenever the viewport width changes, the browser will also automatically scale the headline text appropriately. The only thing that you need to do is figure out the right initial value for the font-size in terms of viewport units.
One major problem with setting font-size this way is that the size of the text will vary greatly depending on the viewport. For example, a font-size of 8vw will compute to about 96px for a viewport width of 1200px, 33px for a viewport width of 400px and 154px for a viewport width of 1920px. This can make the font either too large or too small for it to be properly readable. You can read more about properly sizing the text using a combination of units along with the the calc() function in this excellent article about viewport unit-based typography, and you can read about using the clamp() function to achieve a similar result.
Centering elements with viewport units
Viewport units can be very helpful when you want to put an element exactly at the center of your user’s screen. If you know the element’s height, you just have to set the top and bottom value of the margin property to be equal to [(100 - height)/2]vh:
.centered {
width: 60vw;
height: 70vh;
margin: 15vh auto;
}However, nowadays we can use Flexbox or CSS Grid to center elements, both vertically and horizontally.
Things to Keep in Mind with Viewport Units
If you decide to use viewport units in your projects, there are a few things you should keep in mind.
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 four div elements styled as follows:
div {
height: 50vh;
width: 50vw;
float: left;
}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 side by side.
Changing the width of the divs from 50vw to 50% will solve this problem. The conclusion is that you should use percentages when setting width for block elements so that the scrollbars don’t interfere with the computation of their width.
A similar issue can also occur on mobile devices because of the address bar, which may appear or disappear depending on whether the user is scrolling or not. This will change the viewport height and the user will notice sudden jumps when viewing the content.
To help with this situation, some new viewport units have been added to CSS, such as svw, svh, lvw, lvh, dvw, and dvh. You can read about them in our comprehensive article on CSS sizing units.
Conclusion
In this article, we’ve briefly covered the meaning and applications of the vh, vw, vmin and vmax viewport units. If you’d like to take your knowledge of viewport units and other CSS length units ti the next level, check out An Overview of CSS Sizing Units.
FAQs About CSS Viewport Units
We’ll end by answering some of the most frequently asked questions about CSS viewport units.
What is the vh unit in CSS?
The vh unit in CSS measure the “viewport height”. The viewport is the area of the browser in which a website is displayed. The vh unit allows you to easily measure the height of the viewport and size elements in relation to this visible area. for example, it’s super easy to set an element to 100vh, meaning that it will be exactly as tall as the browser window.
How do viewport units 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, and 1vh is equal to 1% of the viewport’s height.
When should I use viewport units?
Viewport units are useful for creating responsive layouts and elements that adapt to the size of the viewport. They are often used for fonts, spacing, and sizing elements in a way that ensures they look good on various screen sizes.
How can I set viewport height in CSS?
To set viewport height in CSS, use the vh unit. In your CSS stylesheet, target your element, such as a <div>, with the height property, like so:div {height: 100vh; /* This sets the heightto 50% of the viewport height */}
What are some common use cases for viewport units?
Viewport units are commonly used for setting font sizes, creating responsive layouts, designing hero sections, and ensuring that elements like buttons and containers adapt well to different screen sizes.
What’s the difference between 100vh and 100%?
In CSS, both 100vh and 100% are units of measurement used for specifying the size or dimensions of elements, but they have different meanings and applications.100vh represents the full height of the viewport, regardless of the content on the page. When you use 100vh for an element’s height, it will take up the entire vertical height of the user’s screen, and it won’t be affected by the content or other elements on the page.100% is a relative unit of measurement. When you use 100% for an element’s dimensions, it means it will occupy 100% of the available space within its parent container. This can be used for both width and height, and it allows for more flexible and responsive layouts as it adapts to the size of the container.
The advantage of vh is that it can be measured without a dimension being set on the parent element. Setting an element to height: 100% won’t have an effect unless the parent element also has a height set.
How do I set a font size using viewport units?
To set a font size using viewport units, you can use the vw unit. For example, font-size: 5vw; will set the font size to 5% of the viewport width. But be careful with this, as fonts can become too large or too small on some screens. To guard against this, you can use the CSS calc() function (for example, font-size: calc(112.5% + 0.25vw);) or by using the CSS clamp() function (for example, font-size: clamp(2em, 8dvw, 12.5rem);).
What can I use instead of 100vh?
It’s not always ideal to set a fixed height on an element. It’s often better to set this height as a minimum value: min-height: 100vh. While 100vh is a very handy means for setting an element’s height to the height of the viewport, there are alternatives.
You can use 100% height relative to the parent element’s height instead of the viewport height. This works well if your element is contained within another element with a defined height.
You can use CSS Flexbox or Grid layout to create flexible and responsive layouts without relying on specific height values. These layout techniques allow you to control the distribution of space among child elements.
In some cases, you may need to use JavaScript to calculate and set the height dynamically based on your requirements, such as the content inside the element:const element = document.querySelector('.element');const parent = element.parentElement;element.style.height = parent.clientHeight + 'px';
How is viewport width calculated?
Viewport width (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:
– The viewport width unit is denoted as vw
– 1vw is equal to 1% of the width of the viewport
For example, if the width of the viewport (the browser window) is 1000px, then 1vw would be equal to 10px.
Viewport width units are handy for creating responsive web designs because they scale with the size of the viewport. As the user resizes their browser window, elements specified in vw units will adjust their size proportionally. This makes it easier to create designs that look good on both large desktop screens and smaller mobile devices.
Can I use viewport units in combination with other units?
Yes, you can combine viewport units with other CSS units. For example, you can use vw for font size and px for padding or margins to achieve a responsive design.
Are viewport units supported in all browsers?
Viewport units are well-supported in modern browsers, including Chrome, Firefox, Safari, and Edge. However, it’s essential to test your designs across different browsers to ensure consistent behavior. You can read about support for viewport units on the caniuse site, including information about various (minor) bugs in certain browsers.
What are the different types of CSS viewport units?
CSS viewport units are a type of relative unit that are used to specify sizes and dimensions in CSS. There are four types of viewport units: vw, vh, vmin, and vmax. The vw unit represents 1% of the viewport’s width, while vh represents 1% of the viewport’s height. Vmin is equal to the smaller of vw or vh, and vmax is equal to the larger of vw or vh. These units are particularly useful for creating responsive designs that adapt to different screen sizes.
How do I use CSS viewport units 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 CSS viewport units affect the layout on mobile devices?
On mobile devices, CSS viewport units work in the same way as on desktop. However, because the viewport size is typically smaller on mobile, the actual sizes of elements specified in viewport units may be different. This is why it’s important to test your designs on multiple devices and screen sizes.
Can I use CSS viewport units for font sizes?
Yes, CSS viewport units can be used to set font sizes. This can be useful for creating responsive typography that scales with the viewport. For example, to set the font size to be 5% of the viewport’s width, you would write: font-size: 5vw;.
What is the difference between CSS viewport units and percentage units?
While both CSS viewport units and percentage units are relative units, they calculate sizes in different ways. Percentage units are based on the size of the parent element, while viewport units are based on the size of the viewport. This means that an element with a width of 50% will always be half the width of its parent, while an element with a width of 50vw will always be half the width of the viewport.
How do I handle CSS viewport units in landscape mode?
In landscape mode, the viewport’s width and height are swapped, so CSS viewport units will calculate sizes based on the new dimensions. This can be useful for creating designs that adapt to different orientations, but it can also cause unexpected results if not handled correctly. It’s always a good idea to test your designs in both portrait and landscape mode.
Can I use CSS viewport units in print stylesheets?
CSS viewport units are primarily designed for use in screen-based media, and may not work as expected in print stylesheets. For print stylesheets, it’s generally recommended to use absolute units like points or inches, which are more predictable and consistent across different printers and paper sizes.
