视口与百分比

Question

我在创建响应式设计时总是使用百分比，而我还没有使用视口。 我只想知道何时使用视口以及何时使用百分比，因为它看起来与我类似。

Fiddle Example

HTML

<div class="percent">Hello World</div>
<br/>
<div class="viewport">Hello World</div>

CSS

div.percent{
    width:100%;
    background-color:#09c;
    color:white;
}
div.viewport{
    width:100vw;
    background-color:#09c;
    color:white;
}

Answer 1

百分比通常基于父容器，视口单元始终与视口一致。

如果您对body的直接孩子有百分比，那么他们已经关闭了，因为正文有默认的保证金。

Answer 2

视口单元仅用于字体大小，除非自上次检查后它们的规格发生了变化。

百分比可以（几乎）在任何地方使用，并且相对于最后设置的父容器，考虑填充和边距。

但是，视口单元可以与rem和em结合使用来代替百分比。我已经做了几次，但我不推荐它用于流体设计。我们的想法是将html的字体设置为1vw或1vh（取决于您的需求），然后使用rem单位。如果您将根设置为1vw，则1rem将等于视口宽度的1%。