CSS 中的字体大小 - % 还是 em？ [复制]答案

【问题标题】：Font size in CSS - % or em? [duplicate]CSS 中的字体大小 - % 还是 em？ [复制]
【发布时间】：2010-09-13 01:25:01
【问题描述】：

在 CSS 中设置字体大小时，我应该使用百分比值 (%) 还是 em？你能解释一下优点吗？

【问题讨论】：

在我看来 2016 年 em 和 % 没有区别。如果我输入 1.2 em，所有现代浏览器都认为我使用了 120%，例如，如果我使用 0.7 em，所有现代浏览器都认为我使用了 70%……这就是我在 CSS 中所经历的

【解决方案1】：

来自http://archivist.incutio.com/viewlist/css-discuss/1408

%: 一些浏览器不处理字体大小的百分比，但解释 150% 为 150 像素。（一些 NN4 版本，例如。）IE也有问题嵌套元素的百分比。它似乎 IE 使用百分比相对于视口而不是相对于父元素。还有一个问题（尽管根据 W3C 是正确的规格），在 Moz/Ns6 中，你不能使用相对于没有元素的百分比指定的高度/宽度。

em：有时浏览器使用错误参考尺寸，但相对单位是最少的问题。你可能会发现不过有时会被解释为 px。

pt: 差别很大决议，不应使用用于展示。这对我们来说很安全打印使用。

px：唯一可靠的绝对单位屏幕。可能是错误的虽然在印刷品中解释为点通常由几个像素，因此一切都变成了小得离谱。

【讨论】：

关于 pt 的事情。我对 / 有很大的争论。关于那个（并且丢失了）。我和你有同样的观点，很高兴知道有人分享这个观点:)
您真的是说如果我将使用百分比作为字体大小，某些 Netscape Navigator 4 用户可能无法正确查看我的页面吗？
引用的讨论来自 2002 年。这仍然相关吗？是否有任何浏览器在使用中存在 em 或 % 错误？
在浏览器中引用 20 年前的错误并不是一个有用的答案。

【解决方案2】：

两者都根据原来的大小调整字体大小。 1.5em 与 150% 相同。唯一的优势似乎是可读性，选择你最喜欢的。

【讨论】：

有人可以向我解释为什么这会被否决吗？这正是我理解 em 和百分比之间的差异的方式。现在使用一个比另一个没有任何优势。重要的是您使用的是相对于基本字体大小的大小。
谢谢 Lee，我刚刚在 IE6、IE7、Firefox 3、Safari 3、Opera 9.5 和 Google Chrome 中测试了这个，所有这些都在 Windows 上，它们对我来说都一样！
这是一个测试

这是一个测试

【解决方案3】：

A List Apart 上有一篇关于网络排版的非常好的文章。

他们的结论：

在 ems 中调整文本和行高，与指定的百分比身体（和一个可选的警告 Safari 2)，显示提供准确、可调整大小的文本当今常用的浏览器。这是您可以将其放入工具包中的技术袋子和使用作为最佳实践在 CSS 中调整文本大小，同时满足两者设计师和读者。

【讨论】：

其实line-heights 最好写成没有任何单位。这是规范允许的，并且完全避免了某些非常烦人的浏览器怪癖，当涉及到em-based line-heights
我想让人们知道这篇文章是从 2007 年开始的。从那时起，现代浏览器变得越来越普遍，现代浏览器通常会放大而不是默认增加字体大小。正因为如此，“px”变得越来越普遍，在我看来是一种更好的方法。当然这值得商榷，但我个人在项目中遇到过由于嵌套 em 的问题。
@Mohag519 嵌套 em 是一个危险的陷阱。 :)
@Mohag519 是不是 px 会为您提供比具有高像素密度的移动设备更小的东西？我不认为我们希望我们的网站完全像桌面，但在移动设备上超级小；）
@johnb003 此类移动设备的设备像素比大于1。例如，iPhone 4 的物理屏幕宽度为 640 像素，但显示为 320“CSS”像素 (DPR=2)。所以网站不会显得更小！

【解决方案4】：

正如 Galwegian 所提到的，px 是最可靠的网页排版，因为您在页面上所做的所有其他事情大多是针对计算机显示器进行布局的。绝对尺寸的问题在于一些浏览器 (IE) 不会缩放网页上的像素值元素，因此当您尝试放大/缩小时，除了那些元素之外，一切都会调整。

我不知道 IE8 是否正确处理了这个问题，但所有其他浏览器供应商都可以很好地处理像素，并且用户需要放大/缩小文本仍然是少数情况（SO 上的这个文本框可能是例外）。如果你想变得更脏，你总是可以添加一个 javascript 函数来增大你的文本大小，并为用户提供一个“小”/“大”按钮。

【讨论】：

IE7 可以很好地缩放像素值，如果您使用缩放。 IE6 没有缩放，只有文本大小。缩放成为一种要求，因为设计师使用固定的像素比例，而不是允许页面随着文本大小的变化而重排。
这仍然是 IE6 的问题，但话又说回来，一切仍然是 IE6 的问题。虽然我过去因此避免使用 px，但网页整体缩放（相对于文本）的概念已成为标准，我发现自己更频繁地使用 px。

【解决方案5】：

对于 YUI，应该使用百分比。

【讨论】：

我一直在使用 YUI 重置，但后来意识到浏览器的文本大小设置不起作用！如果您在正文上设置了 px，则看不到使用 % 的任何意义，因为它会破坏文本大小设置。

【解决方案6】：

鉴于（几乎？）所有浏览器现在都在调整整个页面的大小，而不仅仅是文本，在可访问的字体大小调整方面，px 与 % 与 ems 的先前问题相当没有实际意义。

所以，答案是这可能无关紧要。使用适合您的任何东西。

% 很好，因为它允许相对调整大小。

px 很好，因为使用它时管理期望相当容易。

em 也用于布局元素时很有用，因为它可以允许与文本大小相关的比例大小。

【讨论】：

误导性答案，尤其是对于那些一开始就不太了解 CSS 的人。无视 CSS 定义逻辑像素这一事实，这是一个糟糕的想法，因为十年前为了适应支持 CSS 的移动设备的冲击，毫无疑问是仓促的决定，像素完全由浏览器和用户自行决定，就默认字体大小而言，至少。除此之外，我们现在拥有非常不同的屏幕纵横比（并非总是具有屏幕的设备）和从 240p 到 2400p 的分辨率。在没有 JavaScript 的 CSS 中使用像素几乎是没用的。
@amn 好吧，请注意，这个答案已有 8 年历史。这是互联网时代的很长一段时间。也就是说，如果不理想，像素仍然很好。大多数（全部？）浏览器在特定设备上充分适应像素字体大小。不过，今天我通常会使用 rem 作为我的计量单位。
也许我遗漏了一些东西，但是如果像素长度有什么好处呢？为什么它们“好”或“理想”？例如，与em 相比。除此之外，我认为关于 SO 的答案应该力求永恒——毕竟它是一个知识库。编程的维基百科 :) 随着维基百科的更新以反映事实，我的拙见也应该如此回答。
@amn 我没有说它们是理想的或有任何真正的主要好处。我只是在回答 OPs 的问题。至于力求永不过时，如果你能预测8年后网络的未来，给你更大的力量！但是我没有时间在这里不断更新我十年来的答案。希望人们知道的足够多，可以查看答案的时间戳并将其考虑在内。

【解决方案7】：

关于css单元%和em的区别。

据我了解（至少在理论上/概念上，但可能不是这两个单元如何在浏览器中实现）这两个单元是等价的，即如果您将 em 值乘以 100 然后替换em 和 % 应该是一样的吧？

如果 em 和 % 之间确实存在一些真正的区别，那么有人可以解释一下（或提供解释的链接）吗？

（我想将我的这条评论添加到它所属的位置，即在"Liam, answered Sep 25 '08 at 11:21" 的答案下方缩进，因为我也想知道为什么他的答案被否决，但我不知道如何发表我的评论在那里，因此不得不写这个“线程全局”回复）

【讨论】：

【解决方案8】：

当您使用它而不是字体大小时，真正的区别就很明显了。设置padding 的1em 与100% 不同。 em 总是相对于字体大小。但是% 可能与字体大小、宽度、高度以及其他一些我不知道的东西有关。

【讨论】：