A Detailed Explanation of Viewport Units (vw/vh/vmin/vmax) in CSS

Overview of Viewport Units
Viewport units are relative length units introduced in CSS3, which are calculated relative to the dimensions of the browser viewport. Unlike percentage units (relative to the parent element), viewport units are directly relative to the size of the visible area, making them highly suitable for creating responsive layouts. They primarily include four units: vw (viewport width), vh (viewport height), vmin (viewport minimum dimension), and vmax (viewport maximum dimension).

Basic Unit Definitions

1. vw (Viewport Width): 1vw is equal to 1% of the viewport width. For example, when the viewport width is 1200px, 50vw = 1200px × 50% = 600px.
2. vh (Viewport Height): 1vh is equal to 1% of the viewport height. For example, when the viewport height is 800px, 25vh = 800px × 25% = 200px.
3. vmin: Represents 1% of the smaller value between the viewport width and height. For example, for a viewport of 1200px × 800px, vmin is relative to 800px (the smaller height).
4. vmax: Represents 1% of the larger value between the viewport width and height. For example, for a viewport of 1200px × 800px, vmax is relative to 1200px (the larger width).

Practical Application Steps

1. Full-Screen Element Design:

   • Using width: 100vw; height: 100vh; can create a container that fills the entire viewport without relying on parent element dimensions.
   • Example: Full-screen background image container:

     .fullscreen-bg {
       width: 100vw;
       height: 100vh;
       background: url("image.jpg") center/cover;
     }
     

2. Responsive Font Sizing:

   • Combine with calc() to achieve text that scales with the viewport, e.g., font-size: calc(16px + 1vw); where the font size increases from a base of 16px as the viewport width grows.
   • Note: Test extreme viewport sizes to avoid fonts being too small on mobile or too large on desktop.

3. Maintaining Element Aspect Ratio:

   • Utilize the relativity of vw and vh to achieve a fixed aspect ratio. For example, a 16:9 video container:

     .video-container {
       width: 50vw;        /* Width is half of the viewport */
       height: calc(50vw * 9 / 16); /* Height calculated proportionally */
     }
     

4. Special Scenarios for vmin/vmax:

   • vmin: Suitable for ensuring elements remain visible on mobile devices in both portrait and landscape orientations, e.g., setting button size to min(40px, 10vmin) to avoid becoming too small in landscape mode.
   • vmax: Can be used to create elements that are always close to the maximum dimension of the viewport, e.g., a full-screen modal overlay using background: rgba(0,0,0,0.5); width: 100vmax; height: 100vmax;.

Precautions and Pitfalls

• Mobile Viewport Differences: The display/hiding of the mobile browser's address bar can change the vh value, potentially causing layout jank. This can be mitigated using CSS custom properties or dynamic JavaScript fixes.
• Alternative Solutions: In some cases, % or dvh (Dynamic Viewport Height) units can be used to solve the jank issue.
• Compatibility: Modern browsers all support these units, but older versions may require prefixes (e.g., -webkit-).

By flexibly combining viewport units, you can efficiently achieve responsive designs closely tied to screen dimensions, reducing the need for media queries.