如何在Bulma CSS中设置基础字体大小以实现响应式设计

Question

阅读Bulma.io文档，我无法找到如何设置响应式设计的基本字体大小。

根据此部分关于设置初始变量，我们可以设置类$size-1等的初始值。然而，我想设置响应式设计的基本字体大小。例如，当屏幕尺寸为980px时，基本字体大小应为12px，而不是标准的16px。由于上述字体类'$size-1'使用rem，它们也会自动调整大小。

因此，我的问题是，在Bulma中是否有可能设置响应式设计的基本字体大小？还是必须手动更改类$size-1等的大小。

谢谢

- Kayote

---

在“通用变量”部分中，辅助类被称为 body-size。请参见此链接：https://bulma.io/documentation/customize/variables/#generic-variables 以及此链接：https://github.com/jgthms/bulma/issues/1963 - Kayote

Answer 1

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

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

这将覆盖 $body-size 变量，但它只用于设置 html {font-size}，因此不应该引起任何问题。

- jiv-e

Answer 2

你需要的是 $body-size 变量。在导入Bulma之前，先自定义变量的值：

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

- viam0Zah