css - Foundation 将文本缩放到多少？

Question

Foundation 以最小宽度缩放 h1-h6:40em。我正在覆盖 Foundation 的默认 h1 字体大小。我将 h1 设置为 font-size: 1.4rem。我想弄清楚如何在 min-width: 40em 上按 Foundations 缩放比例缩放它。我觉得我的h1应该在2.9rem左右

这是 Foundation 定义的默认字体大小

h1 1.5rem

h2 1.25rem

h3 1.1875rem

h4 1.125rem

h5 1.0625rem

h6 1rem

这是 font-sizes Foundation 定义在 min-width: 40em

@media print, screen and (min-width: 40em) {
h1 {
  font-size: 3rem; }
h2 {
  font-size: 2.5rem; }
h3 {
  font-size: 1.9375rem; }
h4 {
  font-size: 1.5625rem; }
h5 {
  font-size: 1.25rem; }
h6 {
  font-size: 1rem; } }

Answer 1

更改 Foundation Header 字体大小的正确方法是打开您的 _settings.scss 文件，然后在“4. Base Typography”下编辑这些行:

$header-styles: (
  small: (
    'h1': ('font-size': 24),
    'h2': ('font-size': 20),
    'h3': ('font-size': 19),
    'h4': ('font-size': 18),
    'h5': ('font-size': 17),
    'h6': ('font-size': 16),
  ),
  medium: (
    'h1': ('font-size': 48),
    'h2': ('font-size': 40),
    'h3': ('font-size': 31),
    'h4': ('font-size': 25),
    'h5': ('font-size': 20),
    'h6': ('font-size': 16),
  ),
);

然后通过运行 GULP“Foundation Watch”重新编译您的 CSS。