划重点！如何使用vmin/vmax轻松搞定前端适配

2023-10-19 17:05:45

vmin 和 vmax：前端适配的神兵利器

在前端适配的世界中，vmin 和 vmax 绝对是重头戏。这两个神奇的单位在不同的场景下能发挥不同的作用，今天我们就来好好认识一下它们，并在 B 站的移动端适配案例中，实际看看它们是如何大展身手的。

vmin： 取当前视口宽度和高度的最小值，1vmin 就是视口较小一侧的 1%

vmax： 取当前视口宽度和高度的最大值，1vmax 就是视口较大一侧的 1%

换句话说，vmin 是基于视口短边的长度计算的，而 vmax 是基于视口长边的长度计算的。

举个例子： 假如视口尺寸为 1024px * 768px，1vmin 就等于 7.68px，1vmax 就等于 10.24px。

不同设备的视口大小千差万别，使用 px 等固定单位会导致元素尺寸在不同设备上呈现不同的结果，而 vmin 和 vmax 可以根据视口大小自动调整元素尺寸，从而完美解决视口不一致问题。

有了 vmin 和 vmax，你再也不用写一大堆冗余代码来适配不同的设备了，只需要一行代码，就能让你的页面在各种设备上都显示得恰到好处。

vmin 和 vmax 是响应式设计的必备工具，它们可以让你轻松实现元素的流体布局，让页面在不同的视口中都能保持良好的布局和交互体验。

B 站的移动端适配工作做得非常出色，而 vmin 和 vmax 在这个过程中扮演了非常重要的角色。通过使用 vmin 和 vmax，B 站移动端的页面布局能够根据不同设备的视口大小自动调整，从而保证了在各种设备上都能获得一致的视觉效果和交互体验。

/* 根字体大小设置为 100px */
html {
  font-size: 100px;
}

/* 正文内容 */
p {
  font-size: 1.2rem; /* 12px */
}

/* 标题 */
h1 {
  font-size: 2.4rem; /* 24px */
}

在这个例子中，根字体大小设置为 100px，这意味着 1rem 等于 10px。然后，正文内容的字体大小设置为 1.2rem，即 12px，而标题的字体大小设置为 2.4rem，即 24px。无论视口大小如何，这些元素的尺寸都将自动调整，以适应视口的大小。

vmin 和 vmax 是前端适配中的两大法宝，它们可以帮助我们轻松解决视口不一致问题，一行代码搞定多端适配，并打造出响应式设计新利器。无论是对于前端开发新手还是经验丰富的开发人员来说，掌握好 vmin 和 vmax 的使用技巧都是非常必要的。

vmin 和 vmax 有什么区别？
- vmin 基于视口短边的长度计算，而 vmax 基于视口长边的长度计算。
什么时候使用 vmin 和 vmax？
- 当需要解决视口不一致问题、实现响应式设计或进行多端适配时，可以使用 vmin 和 vmax。
vmin 和 vmax 与 rem 有什么关系？
- vmin 和 vmax 与 rem 类似，都是相对单位，但 vmin 和 vmax 是基于视口大小计算的，而 rem 是基于根元素的字体大小计算的。
vmin 和 vmax 是否支持所有浏览器？
- vmin 和 vmax 在所有现代浏览器中都得到支持，但 IE 11 及更早版本不支持。
如何使用 vmin 和 vmax？
- 可以在 CSS 中直接使用 vmin 和 vmax，也可以通过 JavaScript 动态调整它们的值。