前端开发常用单位-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>

image-20211212174008593

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

posted @ 2021-12-12 22:06  BNTang  阅读(348)  评论(0)  编辑  收藏  举报