CSS如何获取浏览器中显示的窗口的宽度和高度

顺晟科技

2021-08-06 13:06:08

409

在web页面中，如果想设置一个div元素的高度与高度等于浏览器可视窗口的宽度与高度的话一般都是要借助js脚本来进行设置，除了js脚本外css样式代码中也提供了一个好的方法。

css 获取浏览器窗口的宽度与高度的方法

在桌面端(这里不涉及移动端)，浏览器的可视区域也被称为“视口“，而它的宽度与高度也有相应的单位来表示，分别为"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>顺晟科技博客！</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>顺晟科技博客！</p>
    </div>
</body>
</html>

PS：补充内容

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

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

3、vmax：选取vw和vh中更大的那个

上一篇：检测textarea中是否有换行符的下一篇：js实现如何生成和下载txt文件

网站建设

Js

CSS如何获取浏览器中显示的窗口的宽度和高度