在css样式语言中,如果将width属性与height属性的值分别设置为 vw 与 wh 单位,就可以获取到浏览器可视窗口的高度与宽度。
css 获取浏览器可视窗口的宽度与高度
在PC端(不包含WAP端),浏览器的可视区域也被称为“视口“,而它的宽度与高度分别以"vw"与"vh"表示!
vw:表示视口的宽度单位,1vw表示视口宽度的 1%;
vh:表示视口的高度单位,1vh表示视口高度的 1%;
例1:
定义一个元素,其宽度与高度和浏览器可视区域相同!
<!DOCTYPE html>
<style>
body{
margin: 0;
padding: 0;
width:50vw;
height: 50vh;
background-color: antiquewhite;
text-align: center;
</style>
</head>
我的宽度与高度与浏览器可视窗口的宽度与高度一致!
<p>73so.com!</p>
</body>
</html>
例2:
定义一个元素,其宽度与高度为浏览器可视区域宽与高的50%!
<!DOCTYPE html>
<style>
body{
margin: 0;
padding: 0;
width:50vw;
height: 50vh;
background-color: antiquewhite;
text-align: center;
</style>
</head>
我的宽度与高度是浏览器可视窗口宽度与高度的50%!
<p>73so.com!</p>
</body>
</html>
PS:补充内容
1、除了"vw"与"vh"以外,视口单位还包括"vmin"与"vmax".
2、vmin:选取vw和vh中最小的那个
3、vmax:选取vw和vh中最大的那个
js 判断 textarea 内是否有换行
jquery如何获取或设置radio单选框选中的值