响应式排版 - 文字太小答案

【问题标题】：Responsive typography - text too small响应式排版 - 文字太小
【发布时间】：2013-12-23 05:45:42
【问题描述】：

我正在尝试使我的排版具有响应性，但我认为我做错了什么。为什么文本大小在 90% 和 80% 时这么小？

body {
    font-size: 100%;     /* flexible baseline */
    font-size: 1.375em;  /* 22px */
    line-height: 1.4;
}

@media (max-width: 899px) {
    body {
        font-size: 90%;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 80%;
    }
}

100%

90%

80%

【问题讨论】：

标签： css media-queries font-size typography

【解决方案1】：

我感觉font-size: 100% 在媒体查询中以某种方式覆盖了font-size: 1.375em;。检查 DevTools 进行验证。更好的方法是：

font-size: 137.5%;

并设置媒体查询，例如：

font-size: 0.9em;

当您在媒体查询中设置百分比时，它显然偏离了基线。

【讨论】：

【解决方案2】：

它很小，因为它是浏览器默认字体大小的 90% 或 80%（除非您在根元素上设置了字体大小）。这就是 CSS 的工作原理。在您的第一个规则中，声明 font-size: 100% 无效，第二个声明将字体大小设置为基本字体大小的 1.375 倍，并且您的 @media 规则在视口宽度最多为 480 像素时覆盖该规则。他们确实不将字体大小设置为您使用font-size: 1.375em 设置的宽度的 80% 或 90%，因为该声明已被完全覆盖。

最简单的解决方案是将所有大小设置为相对于浏览器的默认字体大小。如果您希望大小为默认大小的 1.375 倍的 90% 或 80%，您只需稍微计算一下，即可得出以下结果：

body {
    font-size: 137.5%;
    line-height: 1.4;
}

@media (max-width: 899px) {
    body {
        font-size: 123.75%;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 110%;
    }
}

【讨论】：

【解决方案3】：

大小变得太小，因为它是 16 像素的 90% 和 80%（浏览器默认字体大小）。如果您将基线字体大小放在body 元素中，它会在媒体查询启动时被覆盖。

这样做：

html {font-size: 1.375em;  /* 22px */}

body {
    font-size: 100%;     /* flexible baseline */
    line-height: 1.4;
}

如果您将根元素 (html) 设置为所需的基线大小，您可以使用 body 标签上的百分比值来调整各种媒体查询中的文本大小。

【讨论】：