解锁 CSS 新单位 vmin 和 vmax

最新推荐文章于 2025-03-22 14:08:46 发布

代码里的小猫咪

最新推荐文章于 2025-03-22 14:08:46 发布

阅读量1.1k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css css3 前端 vmin vmax

本文链接：https://blog.youkuaiyun.com/weixin_52648900/article/details/144972450

CSS 专栏收录该内容

16 篇文章

订阅专栏

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>

表现为：