响应式 Bootstrap 时更改 <h1> 标记的大小

Question

<h1>当标签在超小或小屏幕尺寸上显示时，有什么方法可以更改标签的文本大小吗？

因为<h1>它有自己的默认尺寸，对于中号来说是正常的，但是对于小号和超小号来说是非常大的。

我想在小屏幕尺寸或超小屏幕尺寸时更改该尺寸。

Answer 1

您可以创建自定义 .css 文件（例如：site.css），然后用于@media在不同的屏幕尺寸上创建不同的行为。要覆盖h1bootstrap 中的类，您必须在 bootstrap 之后包含自定义 css。h1下面是in的示例site.css：

h1 {
  /* Extra small devices (phones, less than 768px) */
  font-size: 10px;

  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    font-size: 12px;
  }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: 992px) {
    font-size: 16px;
  }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
    font-size: 18px;
  }
}

这是bootstrap当前使用的规则，官方文档可以在这里@media看到。