CSS - 这种情况最好用什么(px,%,vw,wh或em)？

Question

我正在使用Ionic2开发应用程序,我正处于需要以不同大小预览应用程序的步骤中.目前我在所有大小,字体大小,填充等使用vw ...但是当调整字体大小有时变得有点小,甚至有时文本往往不可读; 为此,我想知道在这种情况下最好使用什么(px,%,vw,wh或em).

或者我还需要使用@media并支持不同的字体大小？

有什么想法吗？

Answer 1

请注意,我只提到了你问过的那些.

在这里,您可以看到CSS测量单位的完整列表:W3Schools中的CSS单位

我不想告诉你哪一个是"正确的",而是希望你了解每一个实际上是什么.

像素(px):绝对像素.例如,20px任何屏幕上的字面数都是20像素.如果监视器是1980x1200,并且您将元素的高度设置为200px,则该元素将占用200像素.

Percentage(%):相对于父值.

所以对于这个例子:

<div style="width: 200px;">
    <div style="width: 50%;"></div>
</div>

内部div的宽度为100像素.

视口高度/宽度(vw/ vh):相对于视口的大小(基本上是浏览器窗口).

例:

.myDiv {
    width: 100vw;
    height: 100vh;
    background-color: red;
}

将整个浏览器覆盖为红色.这在flexbox中非常常见,因为它自然响应.

Emeters(em)和Root Emeters(rem): em相对于父元素的字体大小.rem将相对于htmlfont-size(大多数是16个像素).如果您希望在项目中保持"大小相对性",而不是像Sass和Less这样的预处理器使用变量,那么这非常有用.我想,这更简单,更直观.

例:

.myDiv {
    font-size: 0.5rem;
}

字体大小为8像素.

现在你知道了,选择合适的用途是正确的.