CssConceptBeginner · 3 min read

What is vmin and vmax in CSS: Simple Explanation and Examples

vmin and vmax are CSS units that represent a percentage of the viewport's smaller and larger dimension, respectively. vmin is 1% of the viewport's smaller side (width or height), while vmax is 1% of the larger side. They help create responsive designs that adapt to screen size changes.

⚙️

How It Works

Imagine you have a window that can change size. The viewport is like that window on your screen. vmin and vmax measure lengths based on this window's size.

vmin takes the smaller side of the window—either width or height—and uses 1% of that as its unit. So if the window is taller than it is wide, vmin is based on the width. If it's wider than tall, it’s based on the height.

vmax does the opposite: it uses 1% of the larger side of the viewport. This way, these units adjust automatically when the window changes size, helping your design stay balanced on different screens.

💻

Example

This example shows a box sized using vmin and vmax. Resize the browser window to see how the box changes size based on the viewport.

html

html, body {
  margin: 0;
  height: 100%;
}
.box {
  width: 20vmin;
  height: 20vmax;
  background-color: #4CAF50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 2rem;
  border-radius: 8px;
  margin: 2rem auto;
  text-align: center;
}

<body>
  <div class="box">Resize me!</div>
</body>

Output

A green rectangular box centered on the page with white text 'Resize me!'. The box's width changes based on the smaller viewport side (20vmin) and height changes based on the larger viewport side (20vmax). When you resize the browser window, the box's shape changes accordingly.

🎯

When to Use

Use vmin and vmax when you want elements to scale based on the viewport size but keep proportions relative to the smaller or larger side. This is helpful for responsive layouts, especially when you want consistent sizing regardless of device orientation.

For example, vmin is great for font sizes or padding that should never be bigger than the smaller screen dimension, ensuring readability on narrow screens. vmax can be used for elements that should fill more space on larger screens, like banners or backgrounds.

✅

Key Points

vmin is 1% of the viewport's smaller dimension (width or height).
vmax is 1% of the viewport's larger dimension.
They help create flexible, responsive designs that adapt to screen size and orientation.
Useful for sizing fonts, boxes, margins, and padding relative to viewport size.
Supported in all modern browsers and work well with other CSS units.

✅

Key Takeaways

vmin and vmax are viewport-based units tied to the smaller and larger viewport sides.

They help make designs responsive by adjusting sizes automatically when the screen changes.

vmin is ideal for limiting size based on the smaller dimension, improving usability on narrow screens.

vmax is useful for elements that should expand with the larger viewport dimension.

These units work well for fonts, containers, and spacing in modern responsive web design.