生活化例子

1. 1. vmin 的例子：
   假设你用手机（竖屏）浏览网页，屏幕高度比宽度大。使用 5vmin 会取屏幕宽度和高度中较小的那个值（这里是宽度）的 5%。这样字体或元素大小会根据手机宽度调整，确保在小屏幕上不会太大。
2. 2. vmax 的例子：
   如果你用平板（横屏）浏览网页，屏幕宽度比高度大。使用 5vmax 会取屏幕宽度和高度中较大的那个值（这里是宽度）的 5%。这样元素大小会适应大屏幕的宽度，看起来更协调。

概念讲解

1. 1. vmin：
2. o 定义：vmin 是视口（屏幕）宽度和高度中较小值的百分比单位。1vmin 等于视口宽度或高度中较小一者的 1%。
3. o 用途：适合在小屏幕上控制元素大小，避免溢出或过大。
4. o 公式：vmin = min(视口宽度, 视口高度) × 百分比。
5. 2. vmax：
6. o 定义：vmax 是视口宽度和高度中较大值的百分比单位。1vmax 等于视口宽度或高度中较大一者的 1%。
7. o 用途：适合在大屏幕上保持元素的视觉效果，避免过小。
8. o 公式：vmax = max(视口宽度, 视口高度) × 百分比。

简单记法

1. 1. vmin：
2. o 口诀：“小人取小”（“小人”指较小的值）。
3. o 记忆法：vmin 的 “min” 就是“最小”的意思，所以它取宽度和高度中的较小值。
4. 2. vmax：
5. o 口诀：“大人取大”（“大人”指较大的值）。
6. o 记忆法：vmax 的 “max” 就是“最大”的意思，所以它取宽度和高度中的较大值。

图示

以下是一个 SVG 图示，直观展示 vmin 和 vmax 的区别：

这个图展示了：

• o 左边是竖屏（高度 > 宽度），vmin 取宽度。
• o 右边是横屏（宽度 > 高度），vmax 取宽度。