ems和pixels是什么关系？答案

【问题标题】：What is the relationship between ems and pixels?ems和pixels是什么关系？
【发布时间】：2010-11-30 14:01:33
【问题描述】：

一个 em 的像素值是多少？

10em = ?px ?

【问题讨论】：

【解决方案1】：

这取决于您渲染的字体和平台。没有普遍的比例。

【讨论】：

【解决方案2】：

em 和 px 之间没有特定的关系。它是根据每个字体的“m”字符的宽度计算的。

【讨论】：

【解决方案3】：

如果 1em 是 16px 并且 10em = 1000%，它大约是 160px。这只是一个近似值，取决于字体、浏览器和操作系统。

【讨论】：

【解决方案4】：

正如其他人所说，没有固定的比率 - 因为它因字体而异 - 可以使用 DHTML 为特定字体/大小组合计算此比率。 p>

只需创建一个 div

style="width: 1em; visibility:hidden"

并将其附加到文档中您感兴趣的位置。

然后您可以通过检查 div 的 clientWidth 属性来找出它的宽度

【讨论】：

这是正确的做法。我通常在页面上创建一个元素：<div id="em"></div> 和以下 css：#em {width:1em; height:1em; overflow:hidden; visibility:hidden;}，然后我可以在页面加载时使用常规 JavaScript 来定义与 pxs 相关的“em”单元的值。
关于此方法的另一个重要说明，em 值是相对的。所以我总是将<body> 元素保留为 1em，并且我总是将我的 html 从上面直接放在它下面。如果您将其设置得更高或更低，它会相应地修改值。

【解决方案5】：

如果您使用的是 11 或 12 像素的标准大小的文本字体，那么一般的经验法则是 1em 的像素大约会那么大，因此是 11 或 12 像素。

【讨论】：

【解决方案6】：

默认1em 是 16px (font-size:100%;)，所以 16px x 10em = 160px

您可以通过更改正文中font-size 的百分比来更改em 的大小，例如，如果您想将em 的大小更改为10px，这将是您的CSS：

body {
font-size:62.5%;
}

16 像素 x 62.5% = 10 像素

【讨论】：