CSS怎么获取浏览器可视窗口的高度与宽度
墨初 Web前端 1858阅读
在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中最大的那个