我刚刚了解了一个新的和不常见的CSS单元。Vh和vw分别测量视口高度和宽度的百分比。

我从Stack Overflow中看到了这个问题,但它让单位看起来更加相似。

vw和vh单位是如何工作的

答案明确地说

Vw和vh是窗宽和窗高的百分比, 分别为:100vw为宽度的100%,80vw为宽度的80%,等等。

这似乎与%单位完全相同,后者更常见。

在开发人员工具中,我尝试将值从vw/vh更改为%,反之亦然,得到了相同的结果。

这两者之间有什么区别吗?如果不是,为什么这些新单位被引入到CSS3?


当前回答

%和vw之间的差异最类似于em和rem之间的差异。%长度相对于本地上下文(包含元素)的宽度,而vw长度相对于浏览器窗口的全宽度。

其他回答

vw (view-width)和vh (view-height)单位与视口大小有关,其中100vw或vh是视口宽度/高度的100%。

例如, 如果一个视口宽为1600px,并且你指定某个值为2vw,这将相当于视口宽度的2%,或32px。

% unit总是基于当前元素的父元素宽度

有一个不一定被提出的差异。100vw包含滚动条宽度,100%不包含滚动条宽度。这是一个很小的区别,但在做设计时很重要。

100%可以是任何物体高度的100%。例如,如果我有一个1000px高的父div,和一个100%高的子div,那么这个子div理论上可能比视口的高度高得多,或者比视口的高度小得多,即使这个div被设置为100%高。

如果我将子div设置为100vh,那么它只会填充视口高度的100%,而不一定是父div。

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>

%和vw之间的差异最类似于em和rem之间的差异。%长度相对于本地上下文(包含元素)的宽度,而vw长度相对于浏览器窗口的全宽度。

整个视口宽度的百分比。10vw将解析为当前视口宽度的10%,或者在480px宽的手机上解析为48px。%与vw之间的差异与em与rem之间的差异最为相似。

%长度相对于本地上下文(包含元素)的宽度,而vw长度相对于浏览器窗口的全宽度。