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%显示，在不同设备上都能保持合适的高度和比例。
2、实现等比例缩放
对于需要在不同屏幕上保持等比例的元素，vmin 和 vmax 很有用。
eg：图片展示 width: 50vmax; height: 30vmax 可让图片在不同设备上按视口较大边的一定比例显示，保持宽高比。
3、设置字体大小
可以根据视口大小动态调整字体大小，使文本在不同设备上都有合适的可读性。
eg：font-size: 3vmin 会让字体大小根据视口较小边的3%变化。
3.1 举个 🌰
1、使用 vmin 实现自适应正方形
.square {
width: 50vmin;
height: 50vmin;
background-color: paleturquoise;
}在任何设备上，该元素都会是一个边长为视口较小边50%的正方形。
2、使用 vmax 设置全屏背景图
.full-screen-bg {
/* 将元素定位为固定，使其始终覆盖整个视口 */
position: fixed;
top: 0;
left: 0;
/* 使用 vmax 设置宽度和高度为视口最大边的100% */
width: 100vmax;
height: 100vmax;
background-image: url('./src/assets/cute.jpeg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}这会使背景图片始终覆盖整个视口，无论视口如何变化。
3.2 实际开发
存在一个场景，有一张图片需要全屏展示，不能出现任何滚动条，如何实现呢？
此时需要图片的尺寸来自于视口的最小边。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 100vmin;
height: 100vmin;
}
</style>
</head>
<body>
<img src="./src/assets/cute.jpeg" />
</body>
</html>
表现为：
4. 注意事项
1、兼容性问题
部分旧浏览器可能不支持，使用时需检查兼容性。必要时提供备用方案，如使用媒体查询结合其他单位。
2、精度问题
由于 vmin 和 vmax 是基于视口的相对单位，在某些高分辨率设备或特殊尺寸视口中，可能出现精度问题，导致元素尺寸显示与预期有偏差，设计时需进行测试和调整。
3、避免过度使用
