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

Question

<分区>

Answer 1

请注意，我只提到了您询问的那些。

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

与其告诉你哪一个是“正确的”，我更希望你了解每一个实际上是什么。

像素(px):绝对像素。例如，20px 在任何屏幕上都是 20 像素。如果显示器的分辨率为 1980x1200，并且您将元素的高度设置为 200px，则该元素将占用 200 像素。

百分比 (%): 相对于父值。

所以对于这个例子:

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

内部 div 的宽度为 100 像素。

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

例子:

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

将整个浏览器覆盖为红色。这在 flexboxes 中很常见。因为它是自然响应的。

Emeters (em) 和 Root Emeters (rem): em 是相对于父元素的字体尺寸。 rem 将相对于 html 字体大小(主要是 16 像素)。如果你想在你的元素中保持“记住大小的相关性”，而不是像 Sass 和 Less 这样的预处理器使用变量，这将非常有用。我想只是更简单、更直观。

例子:

.myDiv {
    font-size: 0.5rem;
}

字体大小为 8 像素。

既然您知道了，请为正确的目的选择正确的。