CSS `Viewports Units` (`vw`, `vh`, `vmin`, `vmax`) 在响应式设计中的陷阱

各位观众老爷们，晚上好！我是你们的老朋友，今天咱们聊聊 CSS 视口单位（Viewport Units）这玩意儿。这玩意儿听着高大上，vw、vh、vmin、vmax，看起来似乎是响应式设计的救星，能让我们轻松适配各种屏幕尺寸。但！是！魔鬼往往藏在细节里，视口单位用不好，那绝对是挖坑给自己跳！今天我就来扒一扒这玩意儿的底裤，看看它有哪些陷阱，以及如何优雅地避开它们。

一、视口单位是个啥？

首先，咱们简单回顾一下视口单位的概念。

vw (Viewport Width): 1vw 等于视口宽度的 1%。如果视口宽度是 1000px，那么 1vw 就是 10px。
vh (Viewport Height): 1vh 等于视口高度的 1%。如果视口高度是 800px，那么 1vh 就是 8px。
vmin (Viewport Minimum): 选取视口宽度和高度中较小的值，然后取其 1%。如果视口宽度是 1200px，高度是 800px，那么 1vmin 就是 8px。
vmax (Viewport Maximum): 选取视口宽度和高度中较大的值，然后取其 1%。如果视口宽度是 1200px，高度是 800px，那么 1vmax 就是 12px。

简单来说，它们都是相对于视口大小的百分比，会随着视口大小的变化而变化。这特性让它们在理论上非常适合做响应式布局。但是，理论和实践之间，往往隔着十万八千里。

二、视口单位的陷阱大揭秘

接下来，咱们进入正题，看看视口单位有哪些坑。

地址栏和工具栏的捣乱

移动端浏览器，尤其是 Chrome 和 Safari，在滚动页面的时候，地址栏和工具栏可能会自动隐藏或显示。这会导致视口高度发生变化，进而影响到使用了 vh 的元素的高度。想象一下，你的页面突然抖动一下，或者布局错乱，用户体验瞬间降到冰点。
- 问题示例：
```
.full-height {
  height: 100vh;
  background-color: lightblue;
}
```
  如果一个元素的高度设置成 100vh，当地址栏隐藏时，这个元素的高度会变高，可能会超出屏幕；当地址栏显示时，这个元素的高度会变矮，导致页面底部出现空白。
- 解决方案：
  - 使用 JavaScript 获取精确的视口高度： 通过 JavaScript 获取浏览器窗口的实际高度，然后将其设置为 CSS 变量，在 CSS 中使用这个变量。
```
function setViewportHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

window.addEventListener('resize', setViewportHeight);
setViewportHeight(); // 初始化
```
```
.full-height {
  height: calc(var(--vh, 1vh) * 100); /* 如果不支持 CSS 变量，默认使用 1vh */
  background-color: lightblue;
}
```
    这种方法比较靠谱，但需要引入 JavaScript，增加了复杂性。
  - 100svh, 100lvh, 100dvh (实验性特性): 新的视口单位 svh (Small Viewport Height), lvh (Large Viewport Height), dvh (Dynamic Viewport Height)。 svh 代表最小的视口高度， lvh 代表最大的视口高度， dvh 代表动态变化的视口高度，相对稳定。但是兼容性目前不好,请谨慎使用。
嵌套元素的高度计算问题

视口单位是相对于根元素的视口大小计算的。这意味着，如果你在一个嵌套的元素中使用 vw 或 vh，它仍然是相对于整个视口的大小，而不是相对于父元素的大小。这可能会导致一些意想不到的布局问题。
- 问题示例：
```
<div class="container">
  <div class="child">
    </div>
</div>
```
```
.container {
  width: 50vw;
  height: 50vh;
  background-color: lightgreen;
}

.child {
  width: 50vw; /* 相对于整个视口宽度，而不是 .container 的宽度 */
  height: 50vh; /* 相对于整个视口高度，而不是 .container 的高度 */
  background-color: lightcoral;
}
```
  在这个例子中，.child 的宽度和高度是相对于整个视口的 50%，而不是相对于 .container 的 50%。这可能会导致 .child 元素超出 .container 的范围。
- 解决方案：
  - 使用百分比 (%)： 如果你想要相对于父元素的大小，最好使用百分比。
```
.child {
  width: 50%; /* 相对于 .container 的宽度 */
  height: 50%; /* 相对于 .container 的高度 */
  background-color: lightcoral;
}
```
  - 使用 calc() 函数： 如果你需要结合视口单位和其他单位，可以使用 calc() 函数进行计算。
```
.child {
  width: calc(25vw); /* 视口宽度的一半的再一半 */
  height: calc(25vh); /* 视口高度的一半的再一半 */
  background-color: lightcoral;
}
```
字体大小和可访问性问题

使用 vw 或 vh 来设置字体大小可能会导致可访问性问题。因为用户可能无法通过浏览器的缩放功能来调整字体大小。想象一下，一个视力不太好的用户，想放大网页上的文字，结果发现文字的大小纹丝不动，那得多崩溃。
- 问题示例：
```
body {
  font-size: 4vw;
}
```
  在这种情况下，用户无法通过浏览器的缩放功能来调整字体大小。
- 解决方案：
  - 使用 em 或 rem： 这些单位是相对于根元素的字体大小计算的，用户可以通过浏览器的缩放功能来调整字体大小。
```
body {
  font-size: 1rem; /* 或者使用 em */
}

h1 {
  font-size: 2rem; /* 相对于 body 的字体大小 */
}
```
  - 结合 vw 和 clamp() 函数： 使用 clamp() 函数可以限制字体大小的范围，避免字体过大或过小。
```
body {
  font-size: clamp(16px, 4vw, 24px); /* 最小 16px，最大 24px，中间值使用 4vw */
}
```
    clamp() 函数接受三个参数：最小值、首选值和最大值。它会根据视口大小自动调整字体大小，但会限制在指定的范围内。
性能问题

频繁地使用视口单位可能会导致性能问题。因为每次视口大小发生变化时，浏览器都需要重新计算使用了视口单位的元素的大小。尤其是在移动设备上，性能问题可能会更加明显。
- 解决方案：
  - 减少视口单位的使用： 尽量避免在大量的元素上使用视口单位。
  - 使用 requestAnimationFrame()： 如果你需要频繁地更新使用了视口单位的元素的大小，可以使用 requestAnimationFrame() 来优化性能。
```
function updateElementSize() {
  // 更新元素大小的代码
  requestAnimationFrame(updateElementSize);
}

updateElementSize();
```
    requestAnimationFrame() 会在浏览器下一次重绘之前执行指定的函数，可以避免频繁地触发重绘和回流。
最大值和最小值的问题

vmin 和 vmax 在某些情况下可能会导致意想不到的结果。例如，如果你的布局是基于宽度的，那么在窄屏幕上，vmax 可能会变得非常大，导致元素超出屏幕。
- 解决方案：
  - 谨慎使用 vmax： 在使用 vmax 时，要仔细考虑在不同屏幕尺寸下的表现。
  - 使用媒体查询： 可以使用媒体查询来针对不同的屏幕尺寸应用不同的样式。
```
.element {
  width: 50vmax;
}

@media (max-width: 768px) {
  .element {
    width: 100%; /* 在小屏幕上使用百分比 */
  }
}
```

三、如何优雅地使用视口单位？

既然视口单位有这么多坑，那是不是就不能用了呢？当然不是！只要掌握了正确的使用方法，视口单位仍然可以成为你的利器。

适度使用： 不要过度依赖视口单位。在可以使用其他单位的情况下，尽量避免使用视口单位。
结合其他单位： 可以结合百分比、em、rem 等单位来创建更灵活的布局。
使用 calc() 函数： 可以使用 calc() 函数来进行更复杂的计算。
使用媒体查询： 可以使用媒体查询来针对不同的屏幕尺寸应用不同的样式。
测试！测试！再测试！ 在不同的设备和浏览器上进行测试，确保你的布局在各种情况下都能正常工作。

四、案例分析

最后，咱们来看几个使用视口单位的案例，看看如何避免踩坑。

全屏轮播图

一个常见的需求是创建一个全屏的轮播图。可以使用 vw 和 vh 来设置轮播图的高度和宽度。

<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

.slider {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
  background-color: #333;
}

在这个例子中，.slider 的宽度和高度都设置为 100vw 和 100vh，确保轮播图占据整个屏幕。但是，需要注意地址栏和工具栏的问题，可以使用 JavaScript 或者新的视口单位来解决。

响应式字体大小

可以使用 vw 来设置字体大小，但要注意可访问性问题。
```
h1 {
  font-size: clamp(2rem, 8vw, 4rem);
}
```
在这个例子中，clamp() 函数限制了字体大小的范围，避免字体过大或过小。

保持宽高比的元素

可以使用 vw 和 padding-top 或 padding-bottom 来创建一个保持宽高比的元素。

<div class="aspect-ratio">
  <img src="image.jpg" alt="Image">
</div>

.aspect-ratio {
  width: 100%;
  padding-top: 56.25%; /* 16:9 的宽高比 */
  position: relative;
}

.aspect-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

在这个例子中，padding-top 的值是根据宽高比计算出来的。例如，16:9 的宽高比，padding-top 的值就是 9 / 16 * 100% = 56.25%。

五、总结

视口单位是一个强大的工具，但也需要谨慎使用。了解它的陷阱，并掌握正确的使用方法，才能真正发挥它的优势。记住，响应式设计不仅仅是适配不同的屏幕尺寸，更重要的是提供良好的用户体验。希望今天的分享对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复