html - CSS 中的大小单位

Question

最后几天，我处理了响应式网页设计和一般网页设计的单位。我的问题是关于 的单位CSS 中的所有大小 ，意味着不仅与字体大小有关，还与填充、宽度、媒体查询等有关。
大多数专业网页设计师认为 px 对于大多数用例来说都很糟糕。
大家反对px
一些让我得出这个假设的文章

http://css-tricks.com/why-ems/

http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

这里有一篇文章也有一个观点赞成 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。
现实生活中的例子
我粗略地分析了他们的源代码，可能我忽略了一些东西。
bootstrap 3
在大多数地方使用 px:字体大小、媒体查询、填充、边距...
网格系统至少对宽度使用百分比。
但是，您可以在 Github 上找到有关此主题的许多问题。许多人要求em/rem。
ZURB 基金会 5
它基于 rem 和 em，在少数情况下它使用 px，但仅用于边框等。
云四网
em 中的媒体查询和字体大小以及其他所有不同单位的混合:px、%、em。
css-tricks.com
字体大小、填充、边距主要以 px 为单位，但媒体查询以 em 为单位，某些宽度以 % 为单位。
到目前为止，我到处都读到过，你应该使用相对大小，并且已经这样做了。如果有合理的理由(我认为是这样，因为很多专业人士都这样做)，我会继续/改进这样做，但它比使用 px 更复杂。
如果您假设大多数人都在使用整页缩放，那么 px 的问题在哪里，拥有一个一致的单位似乎很好？
(支持近 10 年没有升级浏览器/设备的人(IE <= 7)不是我的目标。)
走哪条路？ (请考虑不同的属性字体大小、宽度、媒体查询，...)

Answer 1

特尔；博士:

使用 %用于水平页面布局

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 中所有其他测量的基础.我见过不同策略的拥护者，但从我所见，任何测量都可以正常工作，只要您知道自己在做什么。

像素

设置 font-size在 px非常可靠且易于计算。在后 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; }
...

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

雷姆

根据浏览器的基本字体大小调整大小似乎是 Web 标准要做的事情，因为这样您就允许浏览器的最佳基本字体大小可能不是 16px。然而，在实践中，它有点相反。据我所知，浏览器使用 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 肯定更安全.

其他情况

在某些情况下，上述一般性评论并不适用。例如，您可能会发现 em任何时候您想要与字体大小成比例的东西，s 都会派上用场，如下所示:

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;
}

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

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