我刚刚了解了一个新的不常见的CSS单元。vh并分别vw测量视口的高度和宽度百分比。
vh
vw
vw和vh分别是窗口宽度和高度的百分比:100vw是宽度的100%,80vw是80%,依此类推。
这似乎与%单位完全相同,这很常见。
%
在开发人员工具中,我尝试将值从vw / vh更改为%,反之亦然,并得到相同的结果。
两者之间有区别吗?如果没有,为什么要引入这些新单位CSS3?
CSS3
100%可以达到100%任何高度。举例来说,如果我有一个父div那是1000px高大的,小时候div是在100%高度,那么这个孩子div可能理论上比视,或小于视口的高度小得多的高度高得多,即使是div设置在100%身高。
100%
div
1000px
如果我改为将其子级div设置为100vh,则它将 仅填充100%视口的高度,而不必 填充 父级div。
100vh
body, html { height: 100%; } .parent { background: lightblue; float: left; height: 200px; padding: 10px; width: 50px; } .child { background: pink; height: 100%; width: 100%; } .viewport-height { background: gray; float: right; height: 100vh; width: 50px; } <div class="parent"> <div class="child"> 100% height (parent is 200px) </div> </div> <div class="viewport-height"> 100vh height </div>