响应式排版 - 文字太小

Question

我正在努力使我的排版反应灵敏，但我认为我做错了什么。 为什么文本大小如此之小，分别为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％

Answer 1

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

这样做：

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

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

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

Answer 2

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

font-size: 137.5%;

并设置媒体查询，例如：

font-size: 0.9em;

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

Answer 3

它很小，因为它是浏览器默认字体大小的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%;
    }
}