New CSS Units: What are lvh, svh, and dvh?
In CSS layout design, the vh has long been used as a unit for specifying viewport height. However, since this vh is affected by the browser’s address bar and toolbar, it can cause unintended layout corruption, especially in mobile environments. To solve this problem, the lvh, svh, and dvh units were newly introduced.
1. Explanation of each unit
- lvh (Large Viewport Height): This unit is based on the height of the largest viewport. It usually refers to the maximum display area of the browser, such as with the address bar hidden.
- svh (Small Viewport Height): This unit is based on the height of the smallest viewport. It is based on the smallest display area of the browser, such as with the address bar visible.
- dvh (Dynamic Viewport Height): The average height of the viewport when it dynamically changes (depending on whether the address bar is shown or hidden). It is flexible enough to accommodate fluctuations in a mobile environment, thus bringing stability to the design.
2. Differences from conventional vh
Conventional vh is based on the height of the entire viewport. lvh, svh, and dvh can specify the exact height for each different scenario lvh, svh, and dvh allow the exact height to be specified for different scenarios, thus ensuring design consistency.
3. Usage Examples
The following is a concrete code example using lvh, svh, and dvh.
.container {
height: 100lvh; /* use maximum viewport height */
}
.header {
height: 100svh; /* use minimum viewport height */
}
.footer {
height: 100dvh; /* use dynamic viewport height */
}This allows the height to be adjusted according to the user’s operation, providing a stable design without layout corruption.
4. Actual Application Scenes
The use of the new units is particularly useful in mobile-first design. For example, when full-screen sections or height fluctuations due to the display of address bars need to be taken into account, the use of dvh allows the layout to be properly maintained without compromising the user experience. Also, in certain designs, svh can be used to enable layout based on the smallest display area.
5. Notes.
These new units are relatively new and may not be supported by some older browsers and environments. Be sure to use them while checking for compatibility with the latest browsers. It is also a good idea to have fallback styles in place.
Conclusion
The new CSS units lvh, svh, and dvh can be used to solve layout challenges in mobile environments and provide flexible and stable designs. Take advantage of these units to provide a more user-friendly interface.