Question

我正在使用Bootstrap 3，并希望在每个断点处更改站点的字体大小，以便我可以在一个位置更改字体大小并使其级联到所有Bootstrap组件。

我想要的基本字体大小是：

@media (max-width: @screen-xs-max) { // Base font size is 12px }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { // Base font size is 13px }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { // Base font size is 14px }
@media (min-width: @screen-lg-min) { // Base font size is 16px }

但是，我看不到这样做。似乎所有字体大小的值都是硬编码的。我是唯一能够在每个断点处手动重新定义每个组件的字体大小的方法吗？

为了澄清，我正在寻找一种在每个断点处指定不同基本字体大小的方法，以便所有组件都使用新的基本字体大小。

否则有什么选择？在每个断点处，我必须手动更改每个标题的fontSize，p，cite？

Answer 1

尝试使用媒体查询更改基本字体大小，并使用“em”而不是“px”定义所有网站的字体大小。

继续这样做：

1）根据断点定义全局字体大小（下面的代码写得更少）

body {
  @media (max-width: @screen-xs-min) {
    font-size: 10px;
  }

  @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
    font-size: 11px;
  }

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    font-size: 12px;
  }

  @media (min-width: @screen-md-min) {
    font-size: 14px;
  }
}

2）根据父母的要求定义元素的字体大小。例如：

body div {
    font-size: 1em; // same size as parent

    p {
        font-size: 0.8em; // a little bit smaller
    }
}

Answer 2

最好将标题字体大小设置为24px;内容为14px;使其完美适合所有设备和可读性目的。如果要减小每个断点处的字体大小。然后你必须利用媒体查询。或者以百分比给出字体。

在断点处更改Bootstrap 3全局字体大小

2 个答案: