Question

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

所以这不意味着将其设置为6.25％将等于1em = 1px？看起来似乎更简单的转换，而不是乱七八糟......

谢谢你们！我非常了解em和它的历史（设计学位），但我相信其他人可能会觉得它有用：）

就1em = 1px而言，我看不出这是不可取的。无论您的单位（无论是点还是像素），em都是正方形，没有人会将它们的类型设置为1px（就像没有人会在1pt处设置打印类型一样）。此外，即使你的文章也承认，在大多数数字字体中，大写字母“M”通常小于1em，并且em仅仅是点大小的反映（48pt类型将为em提供48pt乘48pt的平方，12pt类型将产生12x12等。）

此外，人们会这样做的原因更多的是设置页面上其他元素的尺寸，以便在用户调整字体大小时一切都很好地缩放。当然，总会有少数几个人将他们的默认设置设置为16px以外的其他设备，但是值得为像素完美布局付出代价才能很好地扩展。

Answer 1

首先，不要假设1 em等于10个像素。 em单元与正在使用的排版直接相关。如果有人的字体大小为16像素，那么62.5％确实是10像素（16 * 0.625 = 10），但当有人修改了默认字体大小时，这显然会发生变化。

其次，这是我第一次听说62.5％用于基体font-size。我总是使用基于Sane CSS Typography by Owen Briggs的font-size 76％。

最后，要回答您的问题，是的，您可以使用6.25％的字体大小，然后使用12em代替1.2em。但是，我强烈反对这种方法。在typograhy的世界中，一个em旨在the width of the capital letter 'M'。这种方法完全违反了这种惯例，并且会严重混淆将来可能维护CSS的任何人。

Answer 2

可以说，但是你失去了对你的规模的控制。不要忘记，标题通常会按照其排名继承相同的大小（即<h1>将是最大的，<h2>略小一些）。如果要减少这些元素，则需要使用具有大量小数占位符的em值。想象一下<h4> font-size: 0.005em。

或者更糟糕的是，如果您希望将字体缩放得更大，您可能会看到font-size: 40em或一些荒谬的东西。

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

Answer 3

整个“62.5％= 10px”的东西无论如何基本上都被打破了 - 62.5％可能是也可能不是10px，具体取决于浏览器，用户的设置，尤其是最小字体大小设置。所以你不能只设计像素，然后假设62.5％= 10px“转换”为ems，因为你的设计会一直打破。如果你想要一个像素完美的设计，你必须使用像素作为单位。如果您需要灵活的设计，则需要考虑网站不同元素的相应单位 - 应该缩放与文本大小相关的元素的ems，应相对于窗口大小缩放的元素的百分比以及元素的像素（像图像一样，根本不应该扩展。

任何包含font-size：62.5％的CSS从根本上都不了解如何为网页设计。

Answer 4

转换可能更简单，但是em并不意味着它应该意味着什么。

如果给定字体中的大写“M”，则假定1em等于宽度。如果字母M的宽度为1像素，则您的字体将无法读取。

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

Answer 5

我尝试做同样的事情，但遇到了使用rems进行边距和填充的问题。将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;
}

Answer 6

很棒的问题。

我认为6.25％是自适应/响应式网页设计和 弹性模板的有趣主张。

特别是使用rem单位的字体大小调整可以让你自己参与论证...... 1：1的比例只是更容易。

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

请参阅以下rem示例：http://snook.ca/archives/html_and_css/font-size-with-rem#c67739

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

现在提出你的建议......

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示例：Testing CSS3 "rem" Units for Elastic Content

1：1 em与px之比应该可以减少错别字。

REM注意：通过正确的CSS重置和body在font-size和px中声明基础rem，您的样式会优雅地降级。。如果支持rem，并在px之后声明，则应用该值。否则，浏览器会回退到px。

确定rem的支持（特别是在移动设备上）。请点击此页面，您可以使用任何/所有浏览器/设备... http://ahedg.es/w/rem.html

Answer 7

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

Answer 8

http://pixelconverter.kleptomac.com提供更新版本它是一个在线单位转换器，用于转换像素，点，em，百分比。这支持从/到任何这些单位的转换。

Answer 9

对于那些收到此有用帖子的人，我想分享一个有关优质网络排版的youtube视频（约48分钟）的链接。这是实际的，并为每个人提供了重要的见解，可以改变您设置网络类型的方式。

我只是根据这次会议视频进行了一些细微的更改，并且甚至我们的用户也对所取得的结果感到惊讶。

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

Ems到像素转换 - 为什么62.5％而不是6.25％？

9 个答案: