CSS中的视口单位（vw/vh/vmin/vmax）详解

视口单位概述
视口单位是CSS3中引入的相对长度单位，它们相对于浏览器视口（viewport）的尺寸进行计算。与百分比单位（相对于父元素）不同，视口单位直接相对于可视区域的大小，非常适合创建响应式布局。主要包含四个单位：vw（视口宽度）、vh（视口高度）、vmin（视口最小尺寸）、vmax（视口最大尺寸）。

基本单位定义

1. vw（Viewport Width）：1vw等于视口宽度的1%。例如，视口宽度为1200px时，50vw = 1200px × 50% = 600px。
2. vh（Viewport Height）：1vh等于视口高度的1%。例如，视口高度为800px时，25vh = 800px × 25% = 200px。
3. vmin：取视口宽度和高度中较小值的1%。例如，视口1200px×800px时，vmin相对于800px（高度较小）。
4. vmax：取视口宽度和高度中较大值的1%。例如，视口1200px×800px时，vmax相对于1200px（宽度较大）。

实际应用步骤

1. 全屏元素设计：

   • 使用width: 100vw; height: 100vh;可创建占满整个视口的容器，无需依赖父元素尺寸。
   • 示例：全屏背景图容器：

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

2. 响应式字体大小：

   • 结合calc()实现根据视口缩放的文本，如font-size: calc(16px + 1vw);，字体在16px基础上随视口宽度增加。
   • 注意：需测试极端视口大小，避免移动端字体过小或桌面端过大。

3. 保持元素宽高比：

   • 利用vw和vh的相对性，实现高宽比固定。例如，16:9的视频容器：

     .video-container {
       width: 50vw;        /* 宽度为视口一半 */
       height: calc(50vw * 9 / 16); /* 高度按比例计算 */
     }
     

4. vmin/vmax的特殊场景：

   • vmin：适合确保元素在移动端横竖屏下均可见，如按钮大小设为min(40px, 10vmin)，避免横屏时过小。
   • vmax：可用于创建始终接近视口最大尺寸的元素，如全屏弹窗的遮罩层使用background: rgba(0,0,0,0.5); width: 100vmax; height: 100vmax;。

注意事项与陷阱

• 移动端视口差异：移动浏览器地址栏的显示/隐藏会改变vh值，可能导致布局抖动。可通过CSS自定义属性或JavaScript动态修正。
• 替代方案：部分场景可用%或dvh（Dynamic Viewport Height，动态视口高度）单位解决抖动问题。
• 兼容性：现代浏览器均支持，但旧版本需前缀（如-webkit-）。

通过灵活组合视口单位，可以高效实现与屏幕尺寸紧密关联的响应式设计，减少媒体查询的使用。