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

Question

我正在使用 Ionic 2 开发应用程序，我需要预览不同大小的应用程序。

目前，我正在使用 vw 的所有尺寸，包括 font-size ， padding 等等文字不可读。

出于这个原因，我想知道在这种情况下最好使用什么：

• px
• %
• vw
• wh
• em

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

有什么想法吗？

原文由 Hamza L. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

在这里你可以看到 CSS 度量单位的完整列表： W3Schools 中的 CSS 单位

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

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

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

所以对于这个例子：

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

内部 div 的宽度为 100 像素。

视口高度/宽度（ vw / vh ）： 相对于视口（基本上是浏览器窗口）的大小。

例子：

 .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 像素。

现在您知道了，请为正确的目的选择正确的。

原文由 Ariel Weinberger 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

w3schools.com 对 css 单元有一个很好的总结。

我自己总是使用 em 。为什么？

首先， em 是相对于你的 font-size 。因此，正如 w3school 所说， 2em 将是你在 父容器 中定义的 font-size 的 2 倍。因此，您可以为您的 html 标签定义一个特定的 font-size --- 并使用您想要的任何 em 来处理相关的 font-sizes 用于各种任务。

此外， em 几乎涵盖在所有浏览器中。

至少，您可以使用 @media-queries 来处理响应 font-size 移动设备处理。因此，您可以考虑使用 @media-queries 与相对的 font-size --- 结合使用 em 。

原文由 Aer0 发布，翻译遵循 CC BY-SA 3.0 许可协议