Question

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

Answer 1

我个人使用rem或“root em”而不是带有px后备的em。我认为它避免了在级联时跟踪ems的头痛问题。使用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);

希望有所帮助。

Answer 2

如果您想在所有浏览器中进行正确的计算，请不要使用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）中的计算是正确的。

当使用62.5％和em设计时，摆脱chrome min字体大小为12px

2 个答案: