前端开发常用单位-vwvh-CFANZ编程社区

前端开发常用单位-vwvh

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

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

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

前端开发常用单位-vwvh_html

结论: vw/vh 是一个动态的单位, 会随着视口大小的变化而变化(相对单位)

0 条评论