========== 生活化例子 ==========
-
vmin 的例子 ： 假设你用手机（竖屏）浏览网页，屏幕高度比宽度大。使用
5vmin会取屏幕宽度和高度中较小的那个值（这里是宽度）的 5%。这样字体或元素大小会根据手机宽度调整，确保在小屏幕上不会太大。 -
vmax 的例子 ： 如果你用平板（横屏）浏览网页，屏幕宽度比高度大。使用
5vmax会取屏幕宽度和高度中较大的那个值（这里是宽度）的 5%。这样元素大小会适应大屏幕的宽度，看起来更协调。
========== 概念讲解 ==========
-
vmin：
- 定义 ：
vmin是视口（屏幕）宽度和高度中较小值 的百分比单位。1vmin等于视口宽度或高度中较小一者的 1%。 - 用途：适合在小屏幕上控制元素大小，避免溢出或过大。
- 公式 ：
vmin = min(视口宽度, 视口高度) × 百分比。
- 定义 ：
-
vmax：
- 定义 ：
vmax是视口宽度和高度中较大值 的百分比单位。1vmax等于视口宽度或高度中较大一者的 1%。 - 用途：适合在大屏幕上保持元素的视觉效果，避免过小。
- 公式 ：
vmax = max(视口宽度, 视口高度) × 百分比。
- 定义 ：
========== 简单记法 ==========
-
vmin：
- 口诀："小人取小"（"小人"指较小的值）。
- 记忆法：
vmin的 "min" 就是"最小"的意思，所以它取宽度和高度中的较小值。
-
vmax：
- 口诀："大人取大"（"大人"指较大的值）。
- 记忆法：
vmax的 "max" 就是"最大"的意思，所以它取宽度和高度中的较大值。
========== 图示 ==========
以下是一个 SVG 图示，直观展示 vmin 和 vmax 的区别：
这个图展示了：
- 左边是竖屏（高度 > 宽度），
vmin取宽度。 - 右边是横屏（宽度 > 高度），
vmax取宽度。