CSS3 引入了新单位:vw、vh、vmin、vmax。
(1)
vw、
vh、
vmin、
vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点,而是由视窗(
Viewport)大小来决定的,
1代表
1%,视窗(
Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
vw:视窗宽度的百分比(
1vw 代表视窗的宽度为
1%)
vh:视窗高度的百分比
vmin:当前
vw 和
vh 中较小的一个值
vmax:当前
vw 和
vh 中较大的一个值
(2) 浏览器兼容
桌面PC:
Chrome:自
26 版起就完美支持(2013年2月)
Firefox:自
19 版起就完美支持(2013年1月)
Safari:自
6.1 版起就完美支持(2013年10月)
Opera:自
15 版起就完美支持(2013年7月)
IE:自
IE10 起(包括
Edge)到现在还只是部分支持(不支持
vmax,同时
vm 代替
vmin)
移动设备:
Android:自
4.4 版起就完美支持(2013年12月)
iOS:自
iOS8 版起就完美支持(2014年9月)
使网页的div高度满屏的方法:直接给div的高度设成 height:100vh,即可用让div的高度是视窗的高度了
使网页的div宽度满屏的方法:直接给div的宽度设成width:100vw,即可将div的宽度设成视窗的宽度