视区相关单位vw, vh..简介以及可实际应用场景

CSS3中一些新的单位早在去年春暖花开的时候就介绍了，显然，其中就提到了本文要感叹的单位vw, vh，见下图：

我的第一反应是：如果视区宽度是100vm, 则1vm是视区宽度的1/100, 也就是1%，类似于width: 1%。但是，这里多次出现的“视窗”是什么意思？

是浏览器内部宽度大小(window.innerWidth)？是整个浏览器的宽度大小(window.outerWidth)？还是显示器的宽度大小(screen.width)？我疑惑了！

每当我疑惑的时候，我不是去找个“我觉得应该是”的解释，而是，新建个HTML页面，像学生时代做生物实验般，多条件对比验证之。

为了便于其他同行的快速理解，测试的demo页面我特意添加了交互，您可以狠狠地点击这里：vw所谓视窗何意？demo

下图为在IE9浏览器下默认打开的效果：

显然，这里的“视区”不可能是浏览器外部的宽度，计算值不匹配。

我们改变浏览器的宽度，然后会看到：

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

修改vw对应宽度值，图片的尺寸大小可以进一步验证上述结论：

注：一般情况下，Chrome浏览器浏览器内外宽度是一样的（因为浏览器左右无边框）；