CSS3响应式自适应尺寸视窗单位vw、vh详解

vw、vh、vmin、vmax是CSS3新增的视窗单位，同时也是相对单位，它相对视窗（Viewport）大小的百分比。

什么是视窗？

视窗即Viewport，是浏览器实际显示内容的区域，不包括工具栏、地址栏、书签栏。

视窗单位说明

• vw - 视窗宽度的百分比，如1vw即浏览器可视窗口宽度的1%，10vw即窗口宽高的10%
• vh - 视窗高度的百分比，如1vh即浏览器可视窗口高度的1%，10vh即窗口高度的10%
• vmin - 选择当前 vw 和 vh 中的最小值，最小值被均分为100单位的vmin
• vmax - 选择当前 vw 和 vh 中的最大值，最大值被均分为100单位的vmax

示例：

1、vw、vh

浏览器可视窗口宽度1920px，可视窗口高度960px，那么 

10vw = 1920 * 10% = 192px

10vh = 960 * 10% = 96px

2、vmin、vmax

CSS代码

h1 {
	font-size:1vmax;
}
h2 {
	font-size:1vmin;
}

h1：1vmax = 1920 * 1 / 100 = 19.2px

h2：2vmin = 960 * 1 / 100 = 9.6px

意义：

做移动页面开发时，如果使用 vw、wh 设置字体大小会导致字体在手机竖屏和横屏下显示的大小不一样，而由于 vmin 和 vmax 分别是取当前vw、vh中最小的值或最大的值，就可以使得文字大小在横竖屏下保持一致。

除了字体大小，还可以应用在宽度的尺寸上，实现元素的响应式自适应化处理。

浏览器兼容性

PC端浏览器

• 2013年2月：Chrome 26版本起完美支持
• 2013年1月：Firefox 19版本起完美支持
• 2013年10月：Safari 6.1版本起完美支持
• 2013年7月：Opera 15版本起完美支持
• 坑货IE10 ~ Edge版本部分支持，不支持 vmax，同时 vm 代替 vmin

移动端浏览器

• 2013年12月：Android 4.4版本起完美支持
• 2014年9月：IOS8版本起完美支持