A viewport is the framed area of a browser window where a web page is visible, excluding the address bar, toolbars, and status bar. CSS viewport-relative units size lengths against this area rather than against an element’s font size. section 2.4
The original viewport units translate dimensions into percentages of the viewport:
- vh and vw represent one percent of the viewport’s height and width. section 2.4
- vmin and vmax represent one percent of the smaller or larger viewport dimension. section 2.4
- Large, small, and dynamic families extend these ideas with prefixes l, s, and d, such as lvh, svh, and dvh. section 2.4.1
A square that fits different orientations
Set width: 90vmin and height: 90vmin on an element. Because both dimensions use 90 percent of the smaller viewport dimension, the square remains slightly smaller than the viewport in portrait and landscape orientations. A large hero image can instead use 100vh to match the viewport height, while a masthead can use 100lvh when filling the largest screen matters or 100svh when keeping the entire masthead visible matters more. section 2.4 section 2.4.1
Listing 2.14 Square element sized using vmin
.square {
width: 90vmin;
height: 90vmin;
background-color: #369;
}
Use the listing to inspect the minimal CSS pattern for a viewport-fitting square, then compare its 90vmin dimensions with the rendered result. section 2.4
