在使用 62.5% 和 em 设计时摆脱 12px 的 chrome min font size答案

【问题标题】：Get rid of chrome min font size of 12px when using 62.5% and em design在使用 62.5% 和 em 设计时摆脱 12px 的 chrome min font size
【发布时间】：2014-02-08 01:42:39
【问题描述】：

当我们在包装器或 body 元素中使用 62.5% 或 10px 作为基本单位时，子节点可以更简单地使用 em 单位。然而，chrome 的最小字体大小为 12px 使得 62.5% 的设计失败。如果我们使用 12px 作为基本单位，就会使 em 计算变得困难。我想到的办法是用20px作为基本单位，那么内层节点的em单位就可以把原来的像素大小除以20。在响应式设计中解决这个问题的常用方法是什么？

【问题讨论】：

最小字体大小是用户设置。也就是说，您的设计在用户将最小字体大小设置为 21 像素的任何浏览器上都会“失败”。所以最好的解决方案是完全不依赖这些设置，而是保持字体大小不变。
我不确定你为什么认为这会让你的设计失败。你想进行什么样的计算？ 1.5em 是继承字体大小的一倍半，无论您的基本大小是 10px 还是 16px 或其他任何值。哦，你在担心小数像素吗？基于 15 px 基本尺寸的 1.5em 会变成 22.5 px？

标签： google-chrome responsive-design pixel font-size em

【解决方案1】：

如果您想在所有浏览器中正确计算，请不要使用 62.5% 的 body-fontsize。

因为 IE 使用自己的 ClearType-Fonts，62.5% 与 10px 不同——它只有 9.93px。见微软的回答：

https://connect.microsoft.com/IE/feedback/details/816709/ie-11-calculating-font-sizes-wrong-when-setting-the-bodys-font-size-in-relative-units

所以假设你有一个 1000px-Layout 并将 body-FontSize 设置为 62.5% 并将 Layout-width 设置为 100em - 它在 IE 中只有 993px (9.93*100)。

400px-Demo（IE中蓝条较短；其他浏览器正确）：

https://jsfiddle.net/xr77dkLm/

如果您将 body-fontSize 设置为 100% 并使用 25em 宽度，则此 IE-Demo (400px) 中的计算是正确的。

【讨论】：

【解决方案2】：

我个人使用 rem 或“root em”而不是带有 px 后备的 em。我认为它避免了在级联时必须跟踪 em 的麻烦。使用 rems 您可以改为设置与根 HTML 元素相关的所有内容（在您和最常见的情况下为 62.5%）。

我使用的一个不错的 SASS mixin 是：

@mixin font-size($size: 1.6, $line: $size * 1.5) {
    font-size: ($size * 10) + px;
    line-height: ($line * 10) + px;
    font-size: $size + rem;
    line-height: $line + rem;
}

用法很简单：

@include font-size(1.4,1.9);

希望对您有所帮助。

【讨论】：