CSS——vw和vh

最新推荐文章于 2024-07-22 13:45:23 发布

qq_48613863

最新推荐文章于 2024-07-22 13:45:23 发布

阅读量1.1k

点赞数

分类专栏： CSS学习笔记文章标签： css3

本文链接：https://blog.csdn.net/qq_48613863/article/details/124079464

版权

CSS学习笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

vw和vh都是单位，是相对单位，相对于视口的尺寸进行计算，

vw：viewport width ，viewport height

1vw = 1/100视口宽度；1vh = 1/100视口高度。

只需要改单位，不用加入flexible.js就可以实现移动适配。

<!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>体验vw和vh</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 1. vw = 1/100视口宽度 */
        /* .box {
            width: 50vw;
            height: 30vw;
            background-color: pink;
        } */

        /* 2. vh = 1/100视口高度 */
        .box {
            width: 50vh;
            height: 30vh;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

假设是375*667的尺寸，如果用vw，就是某某px除以3.75vw，如果用vh，就是某某px除以6.67vh.

当然，用vw和vh得出来的盒子是一样大小的。

vw和vh不可以混用！

qq_48613863

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——vw和vh

vw和vh都是单位，是相对单位，相对于视口的尺寸进行计算，vw：viewport width ，viewport height1vw = 1/100视口宽度；1vh = 1/100视口高度。只需要改单位，不用加入flexible.js就可以实现移动适配。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U.
复制链接

扫一扫

专栏目录