解锁 CSS 新单位 vmin 和 vmax

CSS 中的 vmin 和 vmax 是相对单位，它们相对于视口的尺寸来定义长度，在响应式设计中非常有帮助。下面简单介绍一下：

1. 基本概念

1.1 vmin

vmin 是 viewport minimum 的缩写，代表视口宽度和高度中 较小值 的 1%。

eg：如果视口宽度是 800px，高度是 600px，那么 1vmin 就等于 6px。

1.2 vmax

vmax 是 viewport maximun 的缩写，代表视口宽度和高度中 较大值 的1%。

eg：在上述例子中，1vmax 就等于 8px。

2. 与其他单位的对比

1、与 px 对比

px 是绝对单位，一旦设定就固定不变，如 width: 200px 会让元素宽度始终为 200 像素，在不同设备上可能导致显示问题。而 vmin 和 vmax 会根据视口变化，能更好地适应不同屏幕尺寸。

2、与 % 对比

% 通常相对于父元素尺寸，如 width: 50% 会让元素宽度是父元素宽度的一半。但 vmin 和 vmax 始终相对于视口，不受父元素影响，更利于创建独立于父元素布局的响应式元素。

3、与 em 和 rem 对比

em 相对于父元素字体大小，rem 相对于根元素字体大小，主要用于字体和一些基于字体的布局。vmin 和 vmax 则专注于视口尺寸，在控制元素整体尺寸和布局上更直接。

3. 适用场景

1、创建自适应布局

使用 vmin 和 vmax 可以让元素根据视口大小自动调整尺寸。

eg：制作导航栏，设置 height: 8vmin，导航栏高度会根据视口较小边的8%显示，在不同设备上都能保持合适的高度和比例。