Zurb Foundation - 计算 <h> 元素大小的不一致

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”定义为基本变量。）

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

1. 在桌面大小的屏幕上：p(1rem), h1(1.4375rem)
2. 在移动尺寸的屏幕上：p(1rem), h1(0.8125rem)

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

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

Answer 1

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

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