Ems转像素的换算 - 为什么是62.5%而不是6.25%？

Question

我知道很多人熟悉在CSS中将字体大小设置为body元素的62.5％。这意味着1em等于10px，并有助于保持像素完美，同时也允许字体缩放。

那么将其设置为6.25％是否意味着1em=1px？似乎比处理小数更简单...

---

谢谢大家！ 我非常清楚EM及其历史（设计学位），但我相信其他人可能会发现这很有用 :)

至于1em = 1px，我不明白为什么这是不可取的。EM是正方形的，无论你使用哪种单位（无论是点还是像素），而且没有人会将其类型设置为1px（就像没有人会将印刷类型设置为1pt）。此外，即使您的文章承认，在大多数数字字体中，大写字母“M”的大小通常小于1em，而且em仅是点大小的反映（48pt类型会呈现一个48pt x 48pt的正方形，12pt类型将产生12x12等等）

此外，人们之所以这样做，更多地是为了设置页面上其他元素的尺寸，以便在用户调整其字体大小时所有内容都可以很好地缩放。当然，总会有极少数人将默认值设置为16px以外的数字，但为了获得像素完美且缩放良好的布局，这是值得付出的代价。

- restlessdesign

---

如果您想要某些空间或大小为1像素，为什么不直接指定1像素，而要通过假定的100％ em大小呢？ - Rolf Rander

@Rolf - 因为如果您在像素中设置大小，IE6会将它们视为绝对值，并且用户无法调整文字大小。 - Nathan Long

我明白，但是如果您假设 0.0625em == 1px，那么当 IE6 调整大小时，事情是否会变得不对齐？ 如果您尝试保持可移植性，难道不应该避免使用 px 吗？ 我能想到使用 px 的唯一原因是将元素与图像对齐（IE 不会调整大小），然后您需要使用 px。 - Rolf Rander

Answer 1

首先，不要假设1 em等于10个像素。em单位与所使用的排版直接相关。如果某人使用16像素的字体大小，则62.5%确实等于10像素（16 * 0.625 = 10），但当有人修改其默认字体大小时，这显然会改变。

其次，这是我第一次听说使用62.5%作为基础正文font-size。我总是使用76%的font-size，基于Owen Briggs的Sane CSS Typography。

最后，回答你的问题，是的，你可以使用6.25%的字体大小，然后使用12em而不是1.2em。但是，我强烈反对这种方法。在排版世界中，一个em意味着大写字母'M'的宽度。这种方法完全违反了常见的做法，将严重困惑未来可能维护你的CSS的任何人。

- cowgod

---

关于 em 到 px 的转换，你说得很好。我的浏览器默认字体大小是 14px，所以 62.5% 是 8.75px，而不是 10px。 - mipadi

Answer 2

可以说，但这样你就失去了对比例的控制。别忘了标题通常会按照它们的等级成比例地继承相同的大小（即<h1>最大，<h2>稍微小一些）。如果你想减小这些元素，你需要使用带有很多小数占位符的em值。想象一下<h4> font-size: 0.005em。

更糟糕的是，如果你想让字体放大，你可能会看到font-size: 40em或者其他荒谬的数字。

简而言之，1em = 10px 对于字体的缩放值来说更加实用。虽然在纸上1：1的比例可能有道理，但它并不适用于明智和可维护的CSS。

- Phil.Wheeler

Answer 3

整个"62.5%=10px"的概念本质上是有缺陷的 - 根据浏览器、用户设置以及特别是最小字体大小设置，62.5%可能是10px，也可能不是。因此，你不能只使用像素进行设计，然后基于假设"转换"为ems，因为你的设计会经常出错。如果你想要一个完美的像素设计，你必须使用像素作为单位。如果你想要一个灵活的设计，你需要考虑网站不同元素的适当单位 - 对于应该相对于文本大小缩放的元素，使用ems；对于应该相对于窗口大小缩放的元素，使用百分比；对于不应该缩放的元素（如图片），使用像素。任何在CSS中包含font-size: 62.5%的人基本上都不理解如何为Web设计。

- user213171

---

我喜欢你对测量类型与其意图相关性的分解。 - Craig Walker

又一个好的单位分类。http://demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When - Mims H. Wright

Answer 4

转换可能更简单，但em的含义将不再是它应该表示的意思。

在给定字体中，1em应该等于大写字母"M"的宽度。如果字母M的宽度为1像素，则您的字体将无法阅读。

http://en.wikipedia.org/wiki/Em_(typography)

- Zoredache

Answer 5

好问题。

我认为6.25%对于自适应/响应式网页设计和弹性模板来说是一个有趣的提议。

特别是使用rem单位进行字体大小调整，符合您的论点... 1:1的比例更加容易实现。

rem: "root em"... 根元素的字体大小。 http://www.w3.org/TR/css3-values/

请参考此处的rem示例。

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

And now with your suggestion...

html { font-size: 6.25%; } /* 1em = 1px if browser has 1em = 16px */
body { font-size: 14px; font-size: 14rem; } /* =14px */
h1   { font-size: 24px; font-size: 24rem; } /* =24px */

...玩一下我的JSBin示例：测试CSS3“rem”单位用于弹性内容

1：1 em到px比率应该会减少打字错误。

REM注意事项：通过适当的CSS重置和body在px和rem中声明基础font-size，您的样式可以优雅地降级...如果支持rem，并且在px之后声明，则应用其值。否则，浏览器将退回到px。

确定支持rem（尤其是移动设备）的方法。请使用您拥有的任何/所有浏览器/设备访问此页面...http://ahedg.es/w/rem.html

- Chris Jacob

Answer 6

我尝试做同样的事情，但是遇到了使用rem设置边距和填充的问题。将font-size设置为62.5％可以避免这些问题。

例如，以下CSS：

html { 
  font-size: 6.25% /* 16px * .0625 => 1px */
}

p {
  font-size: 1rem;
  margin:    1rem;
}

渲染为：

p {
  font-size: 1px;
  margin:    9px; /* WTF?! */
}

很奇怪，对吧？我猜测这是由于最小字体大小引起的一些奇怪冲突。

---

现在，如果你使用font-size: 62.5%，则可以按预期呈现：

html { 
  font-size: 62.5% /* 16px * .625 => 10px */
}

p {
  font-size: .1rem;
  margin:    .1rem;
}

呈现为：

p {
  font-size: 1px;
  margin:    1px;
}

- elstgav

Answer 7

现已推出更新版本，http://pixelconverter.kleptomac.com。 这是一个在线单位转换器，可将像素、点、em、百分比进行转换。它支持任何这些单位之间的转换。

- Jai

Answer 8

你可能也会发现这个有用。http://pixel2em.kleptomac.com 这提供了一个在线像素转换为em的工具，你还可以进行完整的CSS文件转换。

- Jai

Answer 9

对于任何看到这篇有用文章的人，我想分享一个关于良好网页排版的YouTube视频链接（约48分钟）。它是实际的，并且为每个人提供了重要的见解，改变了您为Web设置类型的方式。

我根据这个会议视频做了一些微小的改变，甚至我们的用户都感到惊讶。

演示来自Richard Rutter，演示文稿的链接是Richard Rutter | Web Typography

- McRui