vw/vh 与百分比的区别

本文介绍: 首先，vw与vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Vie w port）大小来决定的，单位 1，代表类似于 1%。视窗(Vie w port)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。vh和vw是要优于rem的，但是兼容性比较差，建议PC端可以优先使用百分比就不多解释了，都明白，那么来看看区别首先，vw，在浏览器没有横向滚动条的时候，vw和百分比，没多少区别，可能唯一的区别在于，百分比依赖父级大小，而vw 没有，v w的浏览

首先，v w与vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Vie w port）大小来决定的，单位 1，代表类似于 1%。视窗(Vie w port)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

vh和v w是要优于r em的，但是兼容性比较差，建议PC端可以优先使用

百分比就不多解释了，都明白，那么来看看区别

首先，v w，在浏览器没有横向滚动条的时候，v w和百分比，没多少区别，可能唯一的区别在于，百分比依赖父级大小，而vw没有，vw的浏览器宽度是固定的(没有横向滚动条)

vh与百分比的区别就大了。

我们原先，要创建一个 div与网页高度一直，必须要对html和body 设置大小，因为百分比是根据父级标签大小来定的

html, body{
    height: 100%；
}

然后，才能设置：

div{
    height: 100%;
}

但是vh 不用，vh 可以直接使用

div{
    height: 100vh;
}

这是最舒服的。

当然，如果有滚动条，由于vw与vh是根据浏览器窗口大小，而窗口大小，是不会改变的，因此，在有滚动条的时候，如果想要沾满，最好使用百分比，比如：

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    <meta charset="UTF-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            width: 3000px;
            height: 3000px;
        }
        .div1{
            width: 80vw;
            height: 100vh;
            background-color: red;
        }
        .div2{
            width: 80%;
            height: 100%;
            background-color: palegreen;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>