Exploring CSS Viewport Units Beyond vw and vh

When working with responsive web designs, most developers should be familiar with vw (viewport width) and vh (viewport height) units. These provide an intuitive way for us to size elements relative to the browser window, and means we can easily do things like full‑screen takeovers simply by setting an element's width to 100vw and height to 100vh (although when it comes to iOS, this isn't always as straightforward as it perhaps should be).

But, CSS offers a wide range of additional viewport units that don't get nearly as much attention, including some designed for writing modes and others tailored for precise handling of viewport quirks. Here, I intend to cover the essentials of vw and vh, and introduce you to some of the lesser‑known viewport units like vmin, vmax, vi, and vb, and talk you through the new s, l, and d modifiers, which can make our CSS even more powerful.

The Basics: vw and vh

I've written about using vw and vh units before, but nevertheless, a quick overview here will help set the foundations for the rest of this article. So:

vw (Viewport Width)

Represents 1% of the viewport's width. For example, if the browser window is 1000px wide then 1vw is 10px, 2vw is 20px, etc.

vh (Viewport Height)

Represents 1% of the viewport's height. For example, if the browser window is 800px tall then 1vh equals 8px.

Example Usage:

.container {  width: 50vw;  // 50% of the viewport width  height: 75vh;  // 75% of the viewport height  background-color: lightblue;}

These units are great for creating layouts that scale with the viewport. However, when browser UI elements (e.g., address bars) or different writing modes come into play, vw and vh can be limiting.

Beyond vw and vh: Additional Viewport Units

As viewport units have matured, their scope has grown significantly, with more units and modifiers becoming available as quickly as browser vendors are able to roll out updates to support them. As with all things in this area, it is always worth checking browser support before diving into using them in production. Nevertheless, support is generally pretty good for viewport units now, and dynamic viewport units (which we'll get to in a moment) aren't far behind, either.

vmin and vmax

Unlike vw and vh which are explicitly tied to one axe or the other of the viewport (width or height), vmin and vmax represent 1% of either the smaller or larger of the two dimensions.

• vmin represents 1% of the smaller dimension (either width or height).
• vmax: Represents 1% of the larger dimension (either width or height).

With these, you can create elements that maintain their proportions across devices, regardless of things like device orientation.

For example, this element will always be 20% of the smaller viewport dimension in width, and 20% of the larger viewport dimension in height:

.box {  width: 20vmin;  // 20% of the smaller viewport dimension  height: 20vmax;  // 20% of the larger viewport dimension  background-color: coral;}

vi and vb

These are a little different, because they represent 1% of the viewport's inline axis, which varies depending on the writing mode.

• vi (Viewport Inline): Represents 1% of the viewport's inline axis.
• vb (Viewport Block): Represents 1% of the viewport's block axis.

To offer a little more context, these would be different when working on a website in Japanese (writing‑mode: vertical‑rl) or right‑to‑left scripts like Arabic.

For example:

.article {  width: 50vi;  // half the viewport size along the inline axis  height: 75vb;  // 75% of the viewport size along the block axis  background-color: lightgoldenrodyellow;}

For left‑to‑right layouts, vi works exactly like vw, and vb like vh. For vertical writing modes, they adapt accordingly, which allows us to develop components that adapt to different language presences whilst still maintaining accessibility and readability.

sv, lv, and dv Modifiers

Much like you can modify em units with an r to make them rem units, viewport units also have a set of their own modifiers which can be combined with the units to better handle variations in the browser UI.

• Small

  (s) measures 1% of the smallest possible viewport size, excluding dynamic UI elements like address bars.

• Large

  (l) measures 1% of the largest possible viewport size, ignoring changes to dynamic UI elements.

• Dynamic

  (d) measures 1% of the viewport size as it is currently rendered and then adjusts dynamically as the browser UI changes.

For example:

.hero {  height: 100svh;  // full height of the smallest viewport  width: 100lvw;  // full width of the largest viewport}.popup {  max-height: 50dvh;  // half the height of the current dynamic viewport}

These modifiers can be really useful for handling mobile devices, where browser UI elements like the address bar can appear and disappear ‑ using these, you can ensure that your element dimensions don't change and don't get obscured by part of the viewport.

When to Use Which Viewport Unit

• vw and vh are great for basic, responsive layouts.
• vmin and vmax are ideal for proportional designs based on the viewport's smallest or largest dimension.
• vi and vb should be used for layouts that need to adapt to different writing modes or internationalisation.
• s, l, and d modifiers are best used for precise handling of viewport changes caused by dynamic browser UI elements.

Wrapping up

Viewport units are a cornerstone of responsive design, and CSS offers far more than just percentage‑based units based on screen width and height (vw and vh). By leveraging units like vmin, vmax, vi, and vb, along with the s, l, and d modifiers, we can create layouts that are not only flexible but also adaptable to global audiences and modern browser quirks.

Key Takeaways

• vw and vh represent 1% of the viewport width and height, perfect for responsive designs.
• vmin and vmax adapt based on the smallest or largest dimension of the viewport.
• vi and vb provide flexibility for different writing modes.
• s, l, and d modifiers refine viewport units for handling browser UI variations.

Understanding these units allows us to build more sophisticated, adaptable interfaces and ensures that our web experiences remain robust and user‑friendly across devices, screen dimensions, and contexts.