响应式布局：相对单位之 vw和vh

听海边涛声

已于 2024-09-03 11:43:44 修改

阅读量723

点赞数 19

文章标签： html 前端

于 2024-09-03 11:34:18 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/141851832

版权

视口（viewport）

在pc端：视口指的是浏览器的可视区域，这个区域包含了滚动条的区域。它跟随着浏览器的大小而变化。
在移动端：指的是Viewport中的Layout Viewport（布局视口），也是包含滚动条的。

视口单位

说明

vw：Viewport Width，相对于视口的宽度。视口被均分为100单位的vw，1vw等于视口宽度的1%。
vh：Viewport Height，相对于视口的高度。视口被均分为100单位的vh，1vh等于视口高度的1%。
vmin：Viewport min，选取vw和vh中最小的那个。
vmax：Viewport max，选取vw和vh中最大的那个。

示例：盒子宽以vw为单位，高以vh为单位

下面设置了盒子的高度和宽度都是视口单位：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 10vw;
      height: 10vh;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">123</div>
</body>

</html>

在这里插入图片描述

随着浏览器窗口变大，盒子的宽和高也跟着变大：
在这里插入图片描述

在这里插入图片描述

示例：盒子宽以vmin为单位，高以vmin为单位

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 30vw;
      height: 30vh;
      background-color: pink;
    }

    .box2 {
      width: 30vmin;
      height: 30vmin;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="box1">宽30vw,高30vh</div>
  <div class="box2">宽30vmin,高30vmin</div>
</body>

</html>

在这里插入图片描述

当浏览器宽度增大一定程度以后，下面窗口不再跟着变大了：
在这里插入图片描述

示例：盒子宽以vmax为单位，高以vmax为单位

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 25vw;
      height: 25vh;
      background-color: pink;
    }

    .box2 {
      width: 25vmin;
      height: 25vmin;
      background-color: purple;
    }

    .box3 {
      width: 25vmax;
      height: 25vmax;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box1">宽25vw,高25vh</div>
  <div class="box2">宽25vmin,高25vmin</div>
  <div class="box3">宽25vmax,高25vmax</div>
</body>

</html>

关注最下面的那个盒子随着浏览器的变化：
在这里插入图片描述

在这里插入图片描述

视口单位与px之间的转换

100vw = 整个视口宽度
1vw = 1%视口宽度

如果设计图像素375px = 100vw
那么 1px = 0.2666666666666667vw
创建一个48px * 35px 大小的元素
35px = 9.333333333333333vw
48px = 12.8vw

例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 48px;
      height: 35px;
      background-color: pink;
    }

    .box2 {
      width: 12.8vw;
      height: 9.3vw;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

</html>

在浏览器中把视口的宽度调整为375px，可以看到，两个盒子大小是一样的了：
在这里插入图片描述

视口单位与百分比的区别

说明

百分比是基于父级元素的宽度/高度的百分比，而vw/vh是根据视口的宽度/高度的百分比。
在百分比与vw/vh获取的都是页面宽高时，视口定位的优势在于vh能够直接获取高度，而用百分比在没有设置body高度的情况下，是无法正确获得可视区域的高度的。
当页面有滚动条时，在百分比与vw/vh获取的都是相同宽高时，100%是不包含滚动条的，而100vw/vh是包含滚动条的宽度/高度。

示例：html的body没有设置高度时，百分比和视口单位的区别

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 50vw;
      height: 50vh;
      background-color: pink;
    }

    .box2 {
      width: 50%;
      height: 50%;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

</html>

在这里插入图片描述

可以看出，只显示了盒子1，而没有显示盒子2。这是因为盒子2宽高采用了百分比为单位，获取不到。body、html是没有高度的。

示例：当页面有滚动条时，百分比和视口单位之间的区别

设置了body的高度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 3000px;
    }

    .box1 {
      width: 50vw;
      height: 50vh;
      background-color: pink;
    }

    .box2 {
      width: 50%;
      height: 50%;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

</html>

在这里插入图片描述

可以看出，给body设置了高度以后，蓝色的盒子（宽高以百分比为单位）也出现了，它的高度是不固定的，而且，粉红色盒子（使用视口单位）和蓝色盒子的宽度也不相同。蓝色盒子的50%是body的50%，是不包含滚动条的。但是，粉红色区域的50vw/50vh包含了滚动条，是整个视口的50%，所以明显比蓝色区域宽。