如何在 Bulma CSS 中为响应式设计设置基本字体大小

Question

通过Bulma.io documentation，我找不到如何为响应式设计设置基本字体大小。

根据this section on setting initial variables，我们可以设置类$size-1 等的初始值。但是，我想为响应式设计设置非常基本的字体大小。 IE。当屏幕尺寸为 980 像素时，基本字体大小应为 12 像素，而不是标准的 16 像素。因为上面提到的字体类“$size-1”是rem，它们也会自动调整大小。

所以，我的问题是，是否可以为 Bulma 中的响应式设计设置基本字体大小？或者我必须手动更改类$size-1 等的大小。

谢谢

Answer 1

在导入 Bulma SASS 文件后添加。

html {
  font-size: 12px;
  @include tablet {
    font-size: 16px;
  }
  @include desktop {
    font-size: 20px;
  }
}

这会覆盖 $body-size 变量，但它仅用于设置 html {font-size}，所以这不会导致任何问题。

Answer 2

这是您正在寻找的$body-size variable。在导入 Bulma 之前，自定义变量的值：

// Custom config
$body-size: 14px !default;
// Standard Bulma
@import "bulma/bulma.sass";