vh和vw，vmin和vmax
vh和vw相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）
1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度
比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px。
设置一个和屏幕同宽的标题，h1{font-size:100vw}，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。
vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。
比如，浏览器的宽度设置为1200px，高度设置为800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果宽度设置为600px,高度设置为1080px, 1vmin就等于6px, 1vmax则等于10.8px。
有一个元素，你需要让它始终在屏幕上可见：
HTML代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title></title>
<style>
*{margin:0; padding:0;}
.box {
height: 100vmin;
width: 100vmin;
background:#f00;/*为了让用户看到*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
页面截图，红色区域会随着浏览器窗口的大小改变而改变
如果要让这个元素始终铺满整个视口的可视区域，只需要把上面的vmin改成vmax即可
*{margin:0; padding:0;}
.box {
height: 100vmax;
width: 100vmax;
background:#f00;/*为了让用户看到*/
}
vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Androidbrowser4.4+支持，chrome for android39支持
网友评论