The browser’s viewport refers to the section of the browser where website content is shown. Being able to measure this area is incredibly helpful because it simplifies tasks that were previously challenging, such as adjusting an element’s height to match the height of the browser window.
Key Takeaways
- Introduction to Viewport Units: Understand the responsive length units—vh, vw, vmin, and vmax—that adapt according to the size of the browser viewport, providing flexible sizing options for CSS elements.
- Practical Uses of Viewport Units: Discover how to apply viewport units in various contexts, such as creating fullscreen backgrounds, ensuring headlines fit perfectly, and centering elements, all of which enhance responsive design.
- Considerations and Conclusion: Explore essential factors to keep in mind when using viewport units, including the effects of scrollbars and dynamic mobile viewports. Additionally, find resources to further develop your CSS skills.
The Units and Their Meanings
Let’s break down what these viewport units represent:
- vh (Viewport Height): This unit is based on the height of the viewport. Specifically, 1vh is equivalent to 1% of the viewport’s height. Therefore, a value of 100vh represents the full height of the viewport.
- vw (Viewport Width): This unit relates to the width of the viewport. A value of 1vw equals 1% of the viewport’s width.
- vmin (Viewport Minimum): This unit is determined by the smaller dimension of the viewport. If the viewport’s height is less than its width, 1vmin will equal 1% of the viewport height. Conversely, if the width is smaller, 1vmin will equal 1% of the viewport width.
- vmax (Viewport Maximum): This unit is based on the larger dimension of the viewport. If the viewport height is greater than its width, 1vmax will equal 1% of the viewport height. If the width is larger, then 1vmax will equal 1% of the viewport width.
Some Example Values
Let’s examine how these viewport units behave in various scenarios:
- Initial Viewport (1200px wide and 1000px high):
- 10vw: ( 10\% ) of 1200px = 120px
- 10vh: ( 10\% ) of 1000px = 100px
- 10vmax: The larger dimension is the width, so it’s 120px (from 10vw).
- 10vmin: The smaller dimension is the height, so it’s 100px (from 10vh).
- Rotated Device (1000px wide and 1200px high):
- 10vh: ( 10\% ) of 1200px = 120px
- 10vw: ( 10\% ) of 1000px = 100px
- 10vmax: The larger dimension is now the height, so it remains 120px (from 10vh).
- 10vmin: The smaller dimension is still the width, so it remains 100px (from 10vw).
- Resized Browser Window (1000px wide and 800px high):
- 10vh: ( 10\% ) of 800px = 80px
- 10vw: ( 10\% ) of 1000px = 100px
- 10vmax: The larger dimension is now the width, so it becomes 100px (from 10vw).
- 10vmin: The smaller dimension is now the height, so it becomes 80px (from 10vh).
Understanding the Difference from Percentages
While viewport units may seem similar to percentages, they are fundamentally different. Percentages are calculated based on the dimensions of the parent element. For example, if you set a child element’s width to 50%, it will occupy half the width of its parent element. In contrast, viewport units directly relate to the overall dimensions of the viewport itself, independent of the parent element’s size. Here’s a quick illustration to clarify:
- If a parent element is 800px wide and you set a child element’s width to 50%, the child will be 400px wide.
- If the viewport is 1200px wide and you set the child element’s width to 50vw, it will be 600px wide, regardless of the parent’s dimensions.
As illustrated, the width of the first child element is defined as 80% of its parent’s width. In contrast, the second child element is set to a width of 80vw, resulting in it being wider than its parent.
Applications of vh, vw, vmin, and vmax
Given that these units are tied to the dimensions of the viewport, they are particularly useful in scenarios where the width, height, or size of elements needs to be proportionate to the viewport.
Fullscreen Background Images or Sections
It’s quite common to apply background images to elements that are intended to cover the entire screen. Additionally, you might want to design a website where each section dedicated to a product or service fully occupies the screen. In such instances, you can set the width of the relevant elements to 100% and their height to 100vh.
For example, consider 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;
}
Creating Headlines That Fit Perfectly Using Viewport Units
The FitText jQuery plugin allows you to scale headlines so they fully occupy the width of their parent element. As previously mentioned, viewport units adjust according to the viewport size. Consequently, when you use viewport units for your headings’ font size, they will fit seamlessly on the screen. As the viewport width changes, the browser will automatically resize the headline text accordingly. Your primary task is to determine the appropriate initial font-size value in viewport units.
However, a significant issue with this method of setting font-size is the considerable variation in text size based on the viewport dimensions. For instance, a font-size of 8vw translates to approximately 96px at a viewport width of 1200px, 33px at a width of 400px, and 154px at a width of 1920px. This fluctuation can lead to the font being too large or too small for effective readability. For more information on properly sizing text using a combination of units and the calc() function, you can refer to an excellent article on viewport unit typography. Additionally, consider exploring the clamp() function for achieving similar results.
Centering Elements Using Viewport Units
Viewport units are extremely useful for positioning an element precisely in the center of the user’s screen. If you know the height of the element, you can easily center it by setting the top and bottom margin values to (100−height)/2(100 – \text{height})/2(100−height)/2 vh. This approach ensures that the element is perfectly centered vertically within the viewport, regardless of the screen size.
.centered {
width: 60vw;
height: 70vh;
margin: 15vh auto;
}
However, nowadays we can use Flexbox or CSS Grid to center elements, both vertically and horizontally.
Улучшенный текст:
When using viewport units for element width, be cautious. If the root element’s overflow property is set to auto, browsers might assume scrollbars don’t exist, causing elements to be slightly wider than intended. Consider the following markup with four divs:
div {
height: 50vh;
width: 50vw;
float: left;
}
Typically, each <div> element would occupy a quarter of the screen. However, when calculating width using viewport units, browsers might assume no scrollbar exists, leading to slightly wider elements than necessary for side-by-side display.
Setting the divs’ width to 50% instead of 50vw resolves this issue. For block elements, using percentages for width avoids scrollbar interference with width calculations.
Mobile devices can also experience this problem due to the address bar, which may appear or disappear during scrolling, altering viewport height and causing sudden content jumps.
To address this, CSS introduced new viewport units like svw, svh, lvw, lvh, dvw, and dvh. For more details, refer to our comprehensive article on CSS sizing units.
In this article, we’ve explored the meaning and applications of the vh, vw, vmin, and vmax viewport units.
