• 一、vw和vh是什么
• 二、“视窗”是什么
• 三、应用场景 - 元素的尺寸限制
• 四、总结

以下内容都摘自博客：http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

一、vw和vh是什么

• vw：相对于视窗的宽度，视窗宽度是100vw
• vh：相对于视窗的高度，视窗高度是100vh

• 点击打开查看浏览器兼容性：

二、“视窗”是什么

• 如果视区宽度是100vm, 则1vm是视区宽度的1/100, 也就是1%，类似于width: 1%，那视窗：
  • 是浏览器内部宽度大小(window.innerWidth)？
  • 是整个浏览器的宽度大小(window.outerWidth)？
  • 还是显示器的宽度大小(screen.width)？

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

• 注：一般情况下，Chrome浏览器浏览器内外宽度是一样的（因为浏览器左右无边框）；加上浏览器大小变小时图片尺寸不渲染的bug，因此，上demo最佳测试浏览器是IE9.

三、应用场景 - 元素的尺寸限制

• block水平元素本身具有自适应性，加上这里的vw相比%并没有什么优势。
  • 因此，vw单位用做宽度自适应的布局，完全是吃力不讨好得显摆！

• 我们应该都做过或见过这样的交互：点击下图，弹框查看原始大图；或者一屏内（不能有滚动条）大图幻灯片浏览。
  • 这类需求让人头疼的地方之一就是原始大图的尺寸限制题——因为很有可能图片过大，一屏显示器区域不够放，我们需要对其进行缩放处理。（无论浏览器尺寸多小，图片永远在一屏内显示）。
• 这类限制的实现，在当下，需要获得图片的原始大小，以及浏览器内部尺寸，算大小，算比例等，算是比较折腾的。
• 但是，vw, vh等单位本身就是浏览器视区大小相关单位，直接使用其做限制，岂不省了N多JS代码？？

• 点击打开demo

.vw_vh_img {
    max-width: 90vw;
    max-height: 90%;
    max-height: 90vh;
}

• 效果图：【可以看到，图片的大小随视区的大小变化而变化】

四、总结

• vw, vh的精确含义
• 兼容性
• 与百分比宽度关系
• 与绝对定位元素关系
• 应在在何种元素上更有价值
• Chrome浏览器下浏览器窗体改变可能的不渲染bug
• IE9下vh单位的定位错误bug
• vh高度值的内部元素不支持百分比%高度
• 温故了CSS3的一些新属性，尤其CSS3 background相关的
• 想到并实践了纯CSS下的弹框屏幕水平垂直居中对齐
• 实践了使用vh实现水平流体布局的可能性
• 学到了列表水平中轴线对齐技术

• vw , vh 用在宽度自适应上没有价值 —— % 可以实现之~~
• vw, vh 用在 absolute/fixed 定位属性元素上没有价值 —— % 可以实现之~~
• vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上！
  • 高度相关属性如 – height/min-height/max-height/line-height/padding-top/padding-bottom等

• % 相当于父元素而言，vw/vh 相对于视区而言！！！！