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。
本文由 Ainto 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: 2018-02-19 23:56