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

Question

在Bulma.io documentation中，我找不到如何设置自适应设计的基本字体大小。

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

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

谢谢

Answer 1

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

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

Answer 2

在导入Bulma SASS文件后添加此内容。

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

这会覆盖$ body-size变量，但它仅用于设置 html {font-size} ，因此不会造成任何问题。