css样式中的vw/vh什么意思,与百分比的区别

1. vw是什么意思？

在css中，vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。
在css中，vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。
CSS 单位是一种量度单位，包括尺寸单位和颜色单位。我们常使用向对单位，不会使得网页在不同的视图下造成布局混乱的情况。
vw是Viewport's width的缩写形式，1vw永远等于当前视口宽度的百分之一。vw是一种视窗单位，也是相对单位。相对于视口的宽度，视口被均分为100单位的vw。
vw优势在于能够直接获取宽度，而用 % 在没有设置 body 宽度的情况下，是无法正确获得可视区域的宽度的，所以这是挺不错的优势。

1. vw/vh 与 百分比的区别

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

3. 案例代码

<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>

<div class="div1"></div>
<div class="div2"></div>