【问题标题】：Unit for sizes in CSSCSS中的尺寸单位
【发布时间】：2026-02-13 22:45:02
【问题描述】：

最后几天我处理了响应式网页设计和一般网页设计中的单元。我的问题是关于 CSS 中尺寸的单位，这意味着不仅与字体大小有关，还与填充、宽度、媒体查询等有关...

对于大多数专业网页设计师来说，大多数用例都认为 px 很漂亮。

大家反对px

让我得出这个假设的一些文章

这里有一篇文章也有意见 pro px： Should I use px or rem value units in my CSS?

反对 px / for (r)em 的原因？

媒体查询

em 媒体查询的一大优势是，在许多文章之后，这些媒体查询甚至在使用浏览器的纯文本缩放时应用。

但我认为所有现代浏览器都支持整页缩放，这也适用于以像素定义的媒体查询（在最新的 Firefox 和 IE 中测试）。

可访问性

em（或 rem）似乎被推荐用于字体大小（可访问性），但其他大小呢？

恕我直言，增加可访问性不再是重要原因，因为现代浏览器支持整页缩放。我对屏幕阅读器一无所知，但我无法想象它们在过去几年中没有得到改进。

可维护性

通过更改基本大小可以轻松更改整个站点的大小。

如果它是对每个设备的持久更改，那么使用 CSS 预处理器应该很容易。

我能找到的唯一原因是在 css-tricks.com 文章中，因为您可能希望在移动设备上更改所有尺寸。你真的想要所有/大多数元素吗？在某些情况下，比如非常大的标题，它似乎很有用，但为什么移动用户能够比桌面用户更好地阅读更小的文本呢？此外，参考像素的测量补偿了不同的 DPI。

现实生活中的例子

我大致分析了他们的源码，可能是我忽略了一些东西。

引导程序 3

在大多数地方使用 px：字体大小、媒体查询、填充、边距... 网格系统至少使用百分比来表示宽度。但是，您可以在 Github 上找到有关此主题的许多问题。许多人要求 em / rem。

ZURB 基金会 5

它基于 rem 和 em，在少数情况下它使用 px，但仅用于边框等。

cloudfour.com

以 em 为单位的媒体查询和字体大小以及其他所有内容的不同单位的混合：px、%、em。

css-tricks.com

字体大小、内边距、边距主要以 px 为单位，但媒体查询以 em 为单位，一些宽度以 % 为单位。

到目前为止，我到处阅读，您应该使用相对尺寸并且已经这样做了。如果有合理的理由（我认为是，因为许多专业人士都这样做）我会继续/改进这样做，但它比使用 px 更复杂。

如果您假设大多数人都在使用整页缩放，那么 px 对于所有内容的问题在哪里，拥有一个一致的单位似乎很好？（支持将近 10 年没有升级浏览器/设备（IE

要走哪条路？（请考虑字体大小、宽度、媒体查询等不同的属性...）

【问题讨论】：

通常在*上我可以找到很多详细的答案，*是这类问题的错误地方还是为什么只有1个答案？
看起来您现在得到了一些很好的答案——想要标记其中一个吗？
完成。我只是想等到我完成重构。

标签： html css responsive-design accessibility typography

【解决方案1】：

我亲自制作了 switch EM，没有遇到任何问题。它适用于您通常将像素放入的任何内容。只有少数情况下我仍然使用 px，即用于边框和阴影以及其他我不希望随着字体大小增大/缩小的东西。

由于 EM 在某种程度上是动态计算的 PX 大小，因此它们在您“知道”您的大小的情况下运行良好。将 PX 转换为 EM（反之亦然）的绝佳工具

http://pxtoem.com/

我确实将 % 用于流体元素，而不是定义一个可以很好地满足我自己需求的特定网格系统。但是我还没有尝试过这种方法，同时还使用了第三方网格/响应式框架。所以那里的里程可能会有所不同。

【讨论】：

【解决方案2】：

这个问题已经有了很好的答案：Should I use PX or REM?

但除此之外，您链接到的“所有人反对 px”的文章通常是基于误解或错误假设。

例如，PX 是相对的（请参阅其他答案）。从可访问性的角度来看（我的工作领域），缩放现在是使事物变大/变小的默认方法，因此 PX 与 EM 无关紧要。（在这两种情况下，浏览器都会渲染为 CSS 像素。）

还有（针对 Cloudfour 文章）Webkit used to have a bug，但它在不久前修复了该问题（预拆分为闪烁），以便 PX 现在在缩放时触发媒体查询。

基本上，无论如何，您使用的任何内容都会转换为 (CSS) 像素，所以这取决于您。

就我个人而言，我在 PX 中设置了一个基础尺寸（通常为 16px），然后在 REM 中设置了尺寸。这意味着很容易设置相对于基础的大小，包括填充/边距等。然后您可以轻松地更改不同媒体查询中的基础像素。如果需要，您还可以为旧版浏览器提供 PX 回退。

【讨论】：

【解决方案3】：

TL;DR:

使用% 进行水平页面布局
em 非常适合垂直间距
为font-size 使用任何你喜欢的东西（我喜欢em）
使用em 进行媒体查询

CSS 测量单位

我发现我对不同 CSS 测量单位的使用因我处理的测量领域而异：水平、垂直、排版或媒体查询。

水平测量

水平空间赋予页面结构。因此，水平测量适用于相对于页面宽度的单位 (%)。例如，为主要内容提供一些基本的喘息空间非常棒：

#main {
  width: 90%;
  margin: 0 auto;
}

当一个或所有水平测量值与页面或其容器成比例时，更复杂的布局（例如列）也可以很好地工作。

.column-main {
  width: 61.8%; /* The golden ratio is pretty awesome. */
}

.column-secondary {
  width: 38.2%;
}

这个想法有一个推论，那就是如果你设置好你的容器结构，you won't have to do much horizontal sizing on the contents。你基本上让块级元素填充其容器的宽度，就像他们喜欢做的那样，你就准备好了。

垂直测量

垂直空间更多的是关于内容的结构（即文档流中的元素彼此之间的接近程度），我认为这些测量适用于固定和相对单位（px 或em） .

但是，在这里使用相对单位有助于为您提供vertical rhythm，这可能非常令人愉悦。它还允许您更改内容（阅读：font-size）并保持垂直间距成比例。

p, ul, ol, dl {
  margin: 0 1em; /* gives you proportional spacing above and below, 
                    no matter the font size */
}

排版测量

字体测量属于自己的类别，可能是因为font-size 是em 中所有其他测量的基础。我见过提倡不同策略的人，但据我所知，只要您知道自己在做什么，任何衡量都可以正常工作。

像素

在px 中设置font-size 非常可靠且易于计算。在后 IE6 时代，它也可以很好地扩展，所以如果你喜欢的话，真的没有理由不使用px。

我在使用px 时看到的唯一问题是它没有利用 CSS 级联。换句话说，一旦我在px 中指定了尺寸，如果我想进行任何大规模更改，我必须返回并单独更改每个尺寸。

em

尽管有任何缺点，但我认为em 可以是指定font-size 的一个非常好的方法。我喜欢的是它让我快速看到我的字体大小之间的关系。很多时候我并不关心字体的确切大小，因为对我来说最重要的是该大小与页面上所有其他大小的关系。

使用em 的重要一点是将大小设置为尽可能接近结束标记。这意味着我避免在容器上设置字体单位：

aside { font-size: 0.8em; } /* This can mess me up */
...
aside p { font-size: 0.8em; } /* Way too small! */

并且主要设置标题和文本项的大小：

h1 { font-size: 2.5em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.7em; }
...

无论如何，我喜欢我可以清楚而轻松地看到那里的尺寸之间的关系。

雷姆

根据浏览器的基本字体大小调整大小似乎是网络标准要做的事情，因为这样您就可以允许最佳基本字体大小可能不是 16 像素的浏览器。然而，在实践中，它有点相反。据我所见，浏览器使用16px 作为基本字体大小，因为这是每个人都期望的，并将该 CSS 度量的实际大小设置为在浏览器中看起来不错。

我在这里看到的最大缺点是browser support。如果您为不支持 rem 的浏览器编写代码，您将添加两次规则：

p {
  font-size: 16px;
  font-size: 1rem; /* I kind of hate repeating myself here,
                      but a good CSS preprocessor might ease that pain. */
}

字体间距

获得font-size 后，其他字体测量值会更容易计算出来，因为大多数其他字体测量值都属于垂直或水平测量类别。例如：

h1 {
  font-size: 2.5em; /* Change this, and everything below stays proportional.
                       (Use whatever measurement unit you prefer.) */
  margin-top: 0.618em;
  margin-bottom: 0.3em;
  line-height: 1.2; /* The only unit-less measure in CSS */
}

媒体查询

在大多数情况下，浏览器在媒体查询中处理em 和px 的方式几乎没有区别。即使用户使用文本缩放来调整页面大小也是如此。

但是，如果有人更改了浏览器设置中的默认文本大小，则行为会大不相同。 See my answer to a related question 和我的 codepen demo 以获得更长的解释。

简而言之，虽然px 在大多数情况下适用于媒体查询，但使用em 肯定更安全。

其他情况

在某些情况下，上述通用 cmets 肯定不适用。例如，您可能会发现 ems 在您想要与字体大小成比例的东西时派上用场，如下所示：

h1.title {
  font-size: 2em;
  width: 20em; /* Resizing the font also resizes its container properly. */
  background-color: #d00d1e;
}

@media (min-width: 400px) {
  h1 {
    font-size: 2.5em; /* Woot! Didn't have to touch the width! */
  }
}

或者您可能想限制行长以提高可读性：

p {
  max-width: 42em;
}

另外，正如在其他 cmets 中提到的，px 仍然适用于边框和类似的东西。它也可以很好地用于填充，尤其是当您将它与 box-sizing 配对时：

.example {
  width: 80%;
  box-sizing: border-box; /* Padding is NOT added to total width. Huzzah! */
  padding: 10px;
}

【讨论】：