hi,欢迎访问本站!
当前位置: 首页Web前端正文

CSS怎么获取浏览器可视窗口的高度与宽度

墨初 Web前端 1458阅读

在css样式语言中,如果将width属性与height属性的值分别设置为 vw 与 wh 单位,就可以获取到浏览器可视窗口的高度与宽度。

css 获取浏览器可视窗口的宽度与高度

在PC端(不包含WAP端),浏览器的可视区域也被称为“视口“,而它的宽度与高度分别以"vw"与"vh"表示!

vw:表示视口的宽度单位,1vw表示视口宽度的 1%;

vh:表示视口的高度单位,1vh表示视口高度的 1%;

例1:

定义一个元素,其宽度与高度和浏览器可视区域相同!

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div{
            width:50vw;
            height: 50vh;
            background-color: antiquewhite;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        我的宽度与高度与浏览器可视窗口的宽度与高度一致!
        <p>73so.com!</p>
    </div>
</body>
</html>

例2:

定义一个元素,其宽度与高度为浏览器可视区域宽与高的50%!

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        div{
            width:50vw;
            height: 50vh;
            background-color: antiquewhite;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        我的宽度与高度是浏览器可视窗口宽度与高度的50%!
        <p>73so.com!</p>
    </div>
</body>
</html>

PS:补充内容

1、除了"vw"与"vh"以外,视口单位还包括"vmin"与"vmax".

2、vmin:选取vw和vh中最小的那个

3、vmax:选取vw和vh中最大的那个

标签:
声明:无特别说明,转载请标明本文来源!
相关推荐