HTML5 中的单位vh和vw

vh和vw

响应式网页设计技术很大程度上依赖于比例规则。然而，CSS比例不总是每个问题的最佳解决方案。CSS宽度是相对于最近的包含父元素。如果你想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样？这正是vh和vw单位所提供的。

---

vh等于viewport高度的1/100

例如，如果浏览器的高是1000px，1vh求得的值为10px。同理，如果显示窗口宽度为800px，1vw的值为8px。

例如：做一个占满高度的容器，代码如下：

#divname {height: 100vh;}

例如：做一个占满宽度的容器，代码如下：

#divname {height: 100vw;}

vmin 和 vmax

vmin和vmax是与宽度和高度的最大值或最小值有关，取决于哪个更大和更小。

例如，如果浏览器设置为1000px宽、800px高，1vmin会是8px，1vmax为10px。如果宽度设置为800px，高度设置为1000px，1vmin将会等于8px而1vmax将会是10 px。