CSS3 的宽高设置 vh和vw

最新推荐文章于 2024-09-26 11:01:02 发布

code_std

最新推荐文章于 2024-09-26 11:01:02 发布

阅读量2.2k

点赞数 2

文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_26330543/article/details/110420973

版权

博客介绍了CSS3中宽高设置的vh和vw。作者原本用js获取屏幕宽高，后发现CSS3的vh和vw。vh表示可见区域高度，vw表示可见区域宽度，二者均将可见区域均分为100单位。此外还介绍了vmax和vmin，分别对应视窗宽高较大和较小值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3 的宽高设置 vh和vw

昨天晚上写样式，需要用到屏幕的宽高，原本还在用js的写法：
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
结果搜索的时候发现了CSS3的 vh和vw

vh和vw

vh: 表示可见区域高度, 假如浏览器可见区域高度为100px，1vh 就表示1px; 即可见被均分为100单位的vh：
vw: 表示可见区域宽度, 假如浏览器可见区域宽度为100px，1vw 就表示1px; 即可见被均分为100单位的vw：

用法

#the_left{
		height: 100vh;/* 表示内容区域的高度*/
		width: 20vw;/* 表示内容区域的宽度的20% */
	}
#the_right{
		height: calc(100vh - 10px);/* 表示内容区域的高度 减去 10px*/
		width:  calc(80vw - 10px);/* 表示内容区域80%的宽度 减去 10px*/
	}

拓展

vmax: 表示视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;
vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;
视区所指为浏览器内部的可视区域大小，
即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
参考文章：css3新发现