logo标签列表

CSS中尺寸的单位

htmlcssresponsive-designaccessibilitytypography
8
在过去的几天里，我处理了响应式网页设计和一般网页设计中的单位。我的问题是关于CSS中所有尺寸单位的，不仅仅是字体大小，还包括填充、宽度、媒体查询等。
似乎px被大多数专业网页设计师认为在大多数情况下都不太好用。

所有人都反对px

以下是一些让我得出这个结论的文章。

这是一篇关于使用 px 的观点文章： 在 CSS 中我应该使用 px 还是 rem 单位？

反对使用 px / 支持使用 (r)em 的理由

媒体查询

根据许多文章的说法，使用 em 媒体查询的一个巨大优势是，即使使用浏览器的纯文本缩放，这些媒体查询也会被应用。

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

可访问性

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

增强可访问性在我看来已不再是一个重要的理由，因为现代浏览器支持全页面缩放。我不知道屏幕阅读器的情况，但我无法想象它们在过去几年中没有得到改善。

可维护性

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

如果这是针对每个设备的持久更改，则使用 CSS 预处理器应该非常容易。

唯一我能找到的原因是在css-tricks.com的文章中，因为你可能希望在移动设备上改变所有尺寸。你真的想要所有/大多数元素都这样吗？对于某些情况，如非常大的标题，它似乎很有用，但为什么移动用户能够比桌面用户更好地阅读较小的文本？此外，参考像素的测量补偿了不同的DPI。
现实生活中的例子
我大致分析了他们的源代码，可能我忽略了一些东西。
Bootstrap 3
在大多数地方使用px：字体大小、媒体查询、填充、边距……网格系统至少使用百分比作为宽度。然而，在Github上可以找到许多与此主题相关的问题。许多人要求em/rem。
ZURB Foundation 5
它基于rem和em，在少数情况下使用px，但只用于边框等。

cloudfour.com

媒体查询和使用em作为字体大小单位，同时混合使用其他单位像px、%、em。

css-tricks.com

字体大小、内边距和外边距大多使用像素(px)，但媒体查询使用em，某些宽度使用百分比(%)。

到目前为止，我已经在各处阅读到，应该使用相对大小并且已经这样做了。如果有合理的原因(我认为有，因为许多专业人士都这样做)，我将继续/改进这样做，但这比使用px更复杂。

如果您假设大多数人使用全页缩放，那么使用px是否有问题，只使用一个一致的单位似乎很好？（不是我的目标支持那些近10年没有升级其浏览器/设备的人（IE <= 7））

哪种方法是最好的？（请考虑不同的属性：字体大小、宽度、媒体查询等）

通常在stackoverflow上我可以找到很多详细的答案，那么为什么只有一个答案？是stackoverflow不适合这种问题吗？ - Niklas Peter
看起来你现在得到了一些不错的答案 - 想要标记其中一个吗？ - sandover
完成了。我只是想等到重构工作完成之后再进行操作。 - Niklas Peter
3个回答
10

TL;DR:

  • 水平页面布局使用%
  • em在垂直间距方面非常有效
  • 使用任何你喜欢的字体大小 (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%;
}

这个想法有一个推论，那就是如果你的容器结构设置得好，你就不需要对内容做太多的水平尺寸调整。基本上你可以让块级元素填充容器的宽度，因为它们喜欢这样做，然后你就完成了。

垂直尺寸

垂直间距更多地涉及到内容的结构（即文档流中元素之间的接近程度），我认为这些尺寸用固定单位和相对单位（px或em）都可以很好地工作。

然而，在这里使用相对单位可以帮助你获得垂直韵律，这可能非常令人愉悦。这还允许您对内容进行更改（即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

使用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; }
...

无论如何，我喜欢能够清晰易见地看到它们之间的关系大小。

rem

基于浏览器基础字体大小进行尺寸调整似乎是符合Web标准的做法，因为这样可以允许那些最佳基础字体大小可能不是16px的浏览器。但实际上，情况有些相反。据我所见，浏览器使用16px作为基本字体大小，因为这正是大家所期望的，并将该CSS度量的实际大小设置为在浏览器中看起来不错的大小。

我看到的最大缺点是浏览器支持。如果你编写的代码针对不支持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 没有太大的区别。即使用户使用文字缩放来调整页面大小，这个道理也是正确的。

然而， 如果某人在其浏览器设置中更改了默认文字大小，则事情会变得非常不同。请参见我对相关问题的回答以及我的codepen演示，了解更详细的解释。

简而言之，在大多数情况下，px 在媒体查询中的运用良好，但使用em则更为安全。

其他情况

当然还有其他情况无法套用上述概括性评论。例如，您可能会发现，em在任何需要按比例缩放的元素中都非常方便，如以下内容：

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

这个问题已经有了一个很好的答案：应该使用PX还是REM？

但值得补充的是，你提供的“反对PX”的文章通常基于误解或错误假设。

例如，PX是相对单位（请参见另一个答案）。从辅助功能的角度来看（这是我的专业领域），缩放现在是调整大小的默认方法，因此PX与EM无关。（浏览器在两种情况下都将呈现为CSS像素。）

此外（对于Cloudfour文章），Webkit 曾经有一个错误，但它在一段时间之前解决了（在分裂之前），所以PX现在会在缩放时触发媒体查询。

基本上，无论你使用什么，都会被转换为（CSS）像素，所以取决于你自己。

个人而言，我会设置一个基础大小为PX（通常是16px），然后使用REM进行大小调整。这意味着可以相对于基础大小轻松地设置大小，包括填充/边距等。然后，您可以在不同的媒体查询中轻松更改基础像素。如果需要，您还可以为旧浏览器提供PX回退选项。
0

我个人已经转换到使用EM，没有遇到任何问题。它非常适用于通常需要像素的任何内容。只有在边框、阴影和其他不希望随字体大小变化的情况下，我仍然使用px。

由于EM是一种动态计算的PX大小，它们在您“知道”自己的大小的情况下非常有效。一个将PX转换为EM（或反之亦然）的好工具。

http://pxtoem.com/

对于流体元素，我使用百分比而不是定义特定的网格系统，这在满足自己需求方面效果很好。但是我尚未尝试同时使用第三方网格/响应式框架的方法。因此，结果可能会有所不同。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接