vw/vh 与百分比的区别

最新推荐文章于 2024-06-07 22:07:24 发布

源辰_付

最新推荐文章于 2024-06-07 22:07:24 发布

阅读量2.3k

点赞数 1

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

本文链接：https://blog.csdn.net/u011724770/article/details/125027164

版权

前端专栏收录该内容

154 篇文章 2 订阅

订阅专栏

首先，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的写法

源辰_付

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vw/vh 与百分比的区别

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

扫一扫