html 自适应单位vw 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端浏览器

2月：Chrome 26版本起完美支持

1月：Firefox 19版本起完美支持

10月：Safari 6.1版本起完美支持

7月：Opera 15版本起完美支持

坑货IE10 ~ Edge版本部分支持，不支持 vmax，同时 vm 代替 vmin

移动端浏览器

12月：Android 4.4版本起完美支持

9月：IOS8版本起完美支持