Introduction to CSS Viewports
Published: 2023-05-22 23:21:06

by [Marvel Ken](https://blog.openreplay.com/authors/marvel-ken)

<blockquote><em>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.</em></blockquote>



A [revised working draft](https://www.w3.org/TR/css-values-4/) 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:
```jsx
<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`:
```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`:
```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:
```css
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.


<div style="background-color:#efefef; border-radius:8px; padding:10px; display:block;">
<hr/>
<h3><em>Session Replay for Developers</em></h3> 
<p><em>Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data.</em></p>
<img alt="OpenReplay" style="margin-top:5px; margin-bottom:5px;" width="768" height="400" src="https://raw.githubusercontent.com/openreplay/openreplay/main/static/openreplay-git-hero.svg" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<p><em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em><p>
<hr/>
</div>






## 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:
```css
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:
```css
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:
```css
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.