Viewport Heights (VH) are a handy way to size elements in a web page relative to the height of the user's screen. Here are some common VH units:
-
vh (Viewport Height): Represents a percentage of the viewport's height. For example, 50vh is half the height of the viewport.
-
dvh (Dynamic Viewport Height): Serves as a dynamic value that can change based on the content. It adapts to the height needed by the content within it.
-
svh (Small Viewport Height): Refers to a smaller portion of the viewport's height, often used for smaller screens or mobile devices.
-
lvh (Large Viewport Height): Denotes a larger portion of the viewport's height, suitable for larger screens or desktops.
Cheat sheet
| Unit | Name |
|---|---|
| vh | Viewport Height |
| dvh | Dynamic Viewport Height |
| svh | Small Viewport Height |
| lvh | Large Viewport Height |
These units are useful for creating responsive web designs that adapt to various screen sizes.