响应式排版-文本太小

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％

- Barbara

Answer 1

因为大小是默认字体大小的90％和80％，所以字体大小变得太小。 如果您将基线字体大小放在body元素中，则在媒体查询启动时它将被覆盖。

请按照以下方式操作：

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

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

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

- Teo Dragovic

Answer 2

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

font-size: 137.5%;

并设置媒体查询，例如：

font-size: 0.9em;

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

- beautifulcoder

Answer 3

它很小是因为它是浏览器默认字体大小的90％或80％（除非您已在根元素上设置字体大小）。这就是CSS的工作原理。在您的第一条规则中，声明font-size: 100％没有任何效果，第二个声明将字体大小设置为基本字体大小的1.375倍，当视口的宽度最多为480px时，您的@media规则会覆盖它。它们不会将字体大小设置为您使用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%;
    }
}

- Jukka K. Korpela