CSS-vw和vh

最新推荐文章于 2024-07-23 14:07:14 发布

毛茸茸的奶袋瓜

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量169

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/w20180341314/article/details/129189383

版权

简介

vw:视口的宽度
vh：视口的高度

物理分辨率（设计稿）宽度  375px
<style>
        html {
            font-size: 26.67px;
        }

        .box1 {
            width: 100vw;
            height: 100vh;
            background-color: #333;
        }

        /* 
        375px=100vw
        1px=100/375   
        vw 0.267
         */
    </style>
    <div class="box1"></div>

vw和%的区别
没有滚动条的时候
100vw=100%

有滚动条的时候
100vw 包含滚动条，是窗口的大小
100% 除去滚动条剩余的空间占满