前端开发常用单位-vwvh

2023-09-28 22:25:27 浏览数 (1)

vw(Viewport Width) 和 vh(Viewport Height) 概述

vw 和 vh 是前端开发中的一个 动态单位, 是一个相对于 网页视口 的单位
系统会将视口的宽度和高度分为 100 份, 1vw 就占用视口 宽度 的 百分之一, 1vh 就占用视口 高度 的 百分之一
vw 和 vh 和百分比不同的是, 百分比永远都是以父元素作为参考, 而 vw 和 vh 永远都是以 视口 作为参考

代码语言：html复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板文件</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 1vw;
            height: 1vh;
            background: red;
        }
    </style>
</head>
<body>
<div></div>

<script>
    console.log(window.innerWidth, window.innerHeight);
    let oDiv = document.querySelector("div");
    console.log(getComputedStyle(oDiv).width);
    console.log(getComputedStyle(oDiv).height);
</script>
</body>
</html>

结论: vw/vh 是一个动态的单位, 会随着视口大小的变化而变化(相对单位)
我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

2023腾讯·技术创作特训营第二期

0 人点赞