vmin

Vmin is a CSS length unit used in responsive web design. It equals 1% of the viewport’s smaller dimension, that is, 1vmin = 0.01 × min(viewport width, viewport height). This makes vmin a viewport-percentage unit that scales with the browser window.

Because vmin is tied to the viewport size, values expressed in vmin automatically adjust when the window is resized. This property is useful for proportional typography and layouts that need to remain balanced across devices with different aspect ratios.

Usage and scope: vmin can be used anywhere CSS lengths are accepted, including font-size, width, height, padding, margins, and borders. It is commonly employed for fluid typography and responsive blocks that preserve their relative proportions as the viewport changes.

Examples: font-size: 3vmin; width: 50vmin; height: 40vmin.

Compatibility and limitations: vmin is supported by all major modern browsers (Chrome, Firefox, Safari, Edge). Some very old browsers may not support it. On mobile devices, the reported viewport size can change with UI chrome visibility, causing vmin values to recalibrate frequently.

Best practices: For robust responsive sizing, consider using clamp to bound vmin-based values, e.g., font-size: clamp(12px, 3vmin, 24px). When planning layouts, mix vmin with other units (px, rem, vw, vh) to maintain precision and accessibility, and test across devices with varying aspect ratios.

See also: vw, vh, vmin, vmax, clamp.