Introduction to CSS Viewports

New viewport units are an intriguing and powerful feature that’s being considered for inclusion in CSS, and this article will give you a leg up on learning about it and how you’ll be able to take advantage of it.

A revised working draft of the CSS Values and Units Level 4 specification, which describes CSS grammar definition and value types, was released by the CSS Working Group (CSSWG). New viewport units are among the intriguing features that this version introduced. This article examines viewport CSS units vw, vh, vmin, and vmax. I considered how they function in terms of layout and how they can be helpful in typesetting.

What are Viewports?

CSS Viewports are the user’s visible area of a web page, which varies with the device used to access it. The viewport is the area of the screen in which web content can be seen. In CSS, there are several viewport-related units, including:

• vw (viewport width) - a unit of length equal to 1% of the viewport width.
• vh (viewport height) - a unit of length equal to 1% of the viewport height.
• vmin (viewport minimum) - a unit of length equal to the smaller of vw or vh.
• vmax (viewport maximum) - a unit of length equal to the larger of vw or vh.

These units allow for responsive design, where the size and position of elements can be adjusted based on the viewport’s size.

The viewport can be controlled using the meta tag in the HTML head section. The meta tag named “viewport” sets the viewport’s size and scaling. For example:

<meta name="viewport" content="width=device-width, initial-scale=1">

This sets the viewport width to the device width and the initial scale to 1, meaning the page is not zoomed in or out when first loaded.

Setting the viewport correctly ensures your web page is optimized for different devices and screen sizes. Improperly setting the viewport can lead to issues such as the page appearing too small or too large on certain devices.

Methodology

CSS provides several methods to control the viewport, including the width and initial-scale properties of the viewport meta tag and media queries. The width property sets the viewport’s width, while initial-scale sets the zoom level when the page is first loaded. Media queries allow developers to apply different styles to different devices and screen sizes.

Developers can create responsive designs that adapt to different screen sizes and devices using CSS viewport properties and media queries. This is important for ensuring a website is accessible and usable on various devices, including desktops, laptops, tablets, and smartphones.

What are CSS Units?

CSS units refer to the units of measurement used in CSS to specify the size, position, and other styles of web page elements. Some common CSS units are:

• Pixels (px): A fixed unit of measurement equal to one dot on a screen.
• Percentages (%): A relative unit of measurement based on the parent element’s size.
• Em (em): A relative unit of measurement based on the element’s font size.
• Rem (rem): A relative unit of measurement based on the root font size of the document.
• Viewport units (vw, vh, vmin, vmax): A relative unit of measurement based on the size of the viewport (the visible area of the web page).

There are also other CSS units like points (pt), inches (in), centimeters (cm), and millimeters (mm), which are mostly used in print styles.

vh and vw Units

vh and vw are units in CSS that represent a percentage of the viewport height and viewport width, respectively. They allow you to size elements relative to the viewport size, making your designs more responsive to different screen sizes.

Here’s an example of how you can use the vh unit in CSS:

body {
  height: 100vh; /* 100% of the viewport height */
}
  
h1 {
  font-size: 5vh;} /* 5% of the viewport height */

And here’s an example of how you can use the vw unit in CSS:

body {
  width: 100vw; /* 100% of the viewport width */
}
  
.container {
  width: 50vw; /* 50% of the viewport width */
  margin: 0 auto;
}

Regarding typesetting, using the vh and vw units can be helpful because they allow you to size elements relative to the viewport rather than using absolute units like px.

This makes your designs more adaptable to different screen sizes, improving the overall user experience.

Another advantage of using vh and vw units is that they make creating consistent typographical scales across different devices easier. For example, you can set the font size of a heading to be 5vh on all devices, and it will always take up 5% of the viewport height, no matter the screen size. This can help ensure your typography remains legible and consistent across different devices.

It’s also worth noting that the vh and vw units are part of the CSS3 specification, and as such, they are well supported by modern browsers. However, some older browsers may not support these units, so checking for compatibility before using them in production is always a good idea.

vmax and vmin

vmax and vmin refer to the maximum and minimum vertical distances of a typeface or font. They are used in typesetting to ensure that the font size is appropriate for the given design and fits within the designated space.

vmax sets the height of the tallest character in the font, while vmin sets the height of the lowest character (usually descenders such as g or y). These values help determine the line spacing and overall appearance of the text.

Having precise control over vmax and vmin can lead to more consistent and legible typography and make it easier to achieve specific design goals. For example, increasing the vmax can increase the overall height of the text and make it more prominent, while decreasing the vmin can make the text appear more compact.

In terms of code, these values can be used in CSS to define the line-height and vertical padding for text elements. For example:

p {
  font-size: 16px;
  line-height: 1.2 * 16px;
  padding-top: (1.2 * 16px - Vmax) / 2;
  padding-bottom: (1.2 * 16px - Vmax) / 2;
}

This code sets the font size to 16px, the line-height to 1.2 times the font size, and the top and bottom padding to the difference between 1.2 times the font size and the vmax, divided by 2. This helps ensure the text is properly spaced and aligned within its container.

By considering vmax and vmin values, typographers and designers can achieve a more consistent and visually pleasing typesetting layout.

When to Use Viewport Units

Knowing how and when to utilize a thing exposes its beauty. We have seen how to use viewport now in this section; we will see when to use it.

Responsitivity

These units can be useful when you want to size elements in a responsive way, such that they scale with the viewport’s size. For example, you could use vw to set the width of an element to 10% of the viewport width:

element {
  width: 10vw;
}

In this way, the element’s width will automatically adjust as the size of the viewport changes. You can use vh and vmin/vmax similarly.

Height Specifications

Another common use case for viewport units is for specifying the height of elements that should take up the full height of the viewport, such as full-screen background images. In comparison, other CSS units such as pixels (px), ems, and rems specify absolute measurements and are not responsive to changes in the viewport size. For this reason, viewport units are often preferred when designing a responsive layout, while absolute units are more suitable for specific, fixed-size designs.

Fixed Positioning

Viewport units can be used to create fixed positioning elements that stay within the bounds of the viewport, such as a header or footer. For example, you could use vh to set the height of a header to 10% of the viewport height:

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10vh;
}

In this case, the header will stay at the top of the viewport, and its height will always be 10% of the viewport height, even when the viewport is resized.

Full-screen Sections

Viewport units can also create full-screen sections on a web page, such as full-page background images. For example, you could use vh to set the height of an element to be 100% of the viewport height:

section {
  background-image: url(background.jpg);
  background-size: cover;
  height: 100vh;
}

In this case, the background image will cover the full height of the viewport, creating a full-screen section.

Limitations and Potential Drawbacks

It’s important to consider the context in which viewport units are used. For example, while they may be well-suited for specifying the height of full-screen elements, they may not be appropriate for specifying the text size, as text that is too small or too large can be difficult to read. In these cases, using relative units such as ems or rems may be more appropriate.

While viewport units are useful in creating responsive designs, they are not all supported in older browsers. Below is list of browsers that support viewports:

• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge
• Opera

However, older browsers may not support these units, so testing your website in different browsers is important to ensure it’s fully compatible. Additionally, you may want to provide fallback styles for browsers that don’t support these units, such as using pixel values or percentages instead.

Conclusion

Viewport units can be a powerful tool for creating responsive designs, but it’s important to use them carefully and understand their limitations and potential drawbacks. When choosing between viewport units and other units, it’s important to consider the specific needs of your design and the context in which the units will be used. Thanks for reading; I hope it was helpful.

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs and track user frustrations. Get complete visibility into your frontend with OpenReplay, the most advanced open-source session replay tool for developers.

Check our GitHub Repo