CSS3之视区单位vw， vh，vmin， vmax

最新推荐文章于 2025-06-18 22:09:45 发布

原创最新推荐文章于 2025-06-18 22:09:45 发布 · 462 阅读

1 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#视区单位vw # vh #calc

HTML&CSS 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了CSS3中的vw、vh、vmin、vmax等视窗单位的应用，以及如何使用calc()函数进行动态计算，适用于响应式设计和流体布局。

说一下在一个应用中设置元素大小时用到的一些方法：

1.CSS3中的新单位即vw, vh：

#songList {display:none; position:fixed; bottom:0px;left:35%; height:50vh; width:30%; text-align:center;}

vw:则是相对于视窗的宽度，vh:相对于视窗的高度。

“视区”所指为浏览器内部的可视区域大小，即window.innerWidth和window.innerHeight的大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持

详细用法可以参考http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

2.calc

left:calc(50% - 144px);

calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。例如，你可以使用calc()给元素的border、margin、pading、font-size、height和width等属性设置动态值。之所以说是动态值，因为这是我们使用表达式来得到的值。calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。