2

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

4

2 回答 2

1

我个人使用 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);

希望有帮助。

于 2014-02-10T03:54:58.903 回答
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) 中的计算是正确的。

于 2016-05-18T20:19:47.820 回答