首先,vw与vh是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
vh和vw是要优于rem的,但是兼容性比较差,建议PC端可以优先使用
百分比就不多解释了,都明白,那么来看看区别
首先,vw,在浏览器没有横向滚动条的时候,vw和百分比,没多少区别,可能唯一的区别在于,百分比依赖父级大小,而vw没有,vw的浏览器宽度是固定的(没有横向滚动条)
vh与百分比的区别就大了。
我们原先,要创建一个div与网页高度一直,必须要对html和body设置大小,因为百分比是根据父级标签大小来定的
html, body{
height: 100%;
}
然后,才能设置:
div{
height: 100%;
}
但是vh不用,vh可以直接使用
div{
height: 100vh;
}
这是最舒服的。
当然,如果有滚动条,由于vw与vh是根据浏览器窗口大小,而窗口大小,是不会改变的,因此,在有滚动条的时候,如果想要沾满,最好使用百分比,比如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
这个时候,想要占满,div2的百分比写法,就会优于vh的写法