css - Zurb Foundation - 计算 元素大小的不一致

Question

在 Zurb Foundation(5.2.2 和 5.4.5)中，似乎在计算 h(h1, h2, ..) 元素的大小时存在不一致。我将相关 scss 变量的值更改为 (23)，而不是默认值 (44) ($h1-font-size: rem-calc(23);)。此更改应使 h1 元素与 h4 元素一样大。这对桌面屏幕“成功”生效(h1 变为 1.4375rem)。然而，字体大小在移动屏幕上变得非常小(h1 变为 0.8125rem)。

在计算 h 元素的字体大小时，我认为移动设备大小的媒体查询使用的基数(可能使用 scss 文件中定义的 $rem-base 变量)与用于桌面的基数(可能使用浏览器默认将“1 rem”定义为基本变量。)

总结一下，在 scss 文件中使用 ($h1-font-size: rem-calc(23);)，结果如下。

1. 在桌面大小的屏幕上:p(1rem), h1(1.4375rem)
2. 在手机大小的屏幕上:p(1rem), h1(0.8125rem)

是我遗漏了什么，还是有错误？如果是错误，除了手动更新 css 文件之外，是否有解决方法？我的目标是减小 h1 元素的大小。我希望 h1 元素看起来和 h4 元素一样大。

非常感谢您付出的努力和时间...

Answer 1

Foundation 在较小的屏幕上有一个不同的字体大小变量。$h4-字体减少根据您的需要更改上述变量。_type.scss的-31行

$h4-font-reduction: rem-calc(5) !default;