CSS

Question

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

目前，我使用的是vw所有尺寸，包括font-size、padding等，但在调整字体大小时有时会变得有点小，有时甚至文本不可读。

因此，我想知道在这种情况下最好使用什么：

px
%
vw
wh
em

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

有什么想法吗？

Answer 1

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.

Answer 2

这可能会被关闭，但我喜欢使用 em 单位，因为它们具有很强的可扩展性，尤其是在移动浏览器中，据说，我确实将媒体查询与它们一起使用。我真的取决于你在做什么。

一个好的网站可能由几个 em 和几个 px 的比率组成，所以无论您的最终目标是什么，都应该决定您将使用哪个，

如果你了解每个应用程序，您将能够最终选择您更喜欢的应用程序。 W3Schools 和 W3code 都有关于它们的好文章...

Answer 3

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

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

与其告诉你哪一个是 "right one"，我更希望你了解每一个到底是什么。

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

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

所以对于这个例子：

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

内部 div 的宽度为 100 像素。

Viewport height/width (vw/vh): 相对于视口的大小（基本上是浏览器window） .

示例：

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

将用红色覆盖整个浏览器。这在 flexboxes 中很常见，因为它具有自然响应性。

Emeters (em) 和 Root Emeters (rem)： em 是相对于父元素的字体大小。 rem 将相对于 html 字体大小（主要是 16 像素）。如果您想在项目上保留 "in mind relativity of sizes" 并且不使用 Sass 和 Less 等预处理器的变量，这将非常有用。我想只是更简单、更直观。

示例：

.myDiv {
    font-size: 0.5rem;
}

字体大小将为 8 像素。

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

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

CSS - What is best to use for this case (px, %, vw, wh or em)?

html

ionic2