改变 <h1> 的大小响应引导时的标记

2022-01-18 00:00:00 grid css twitter-bootstrap bootstrap-4 responsive-design

当<h1>标签在超小或小屏幕尺寸下，有什么办法可以改变它的文本大小吗?

Is there any way to change the text size of <h1> tag when it goes on extra small or small screen size?

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

Because <h1> has its own default size which is normal for medium size but very large for small and extra small.

当它变为小屏幕尺寸或超小屏幕尺寸时，我想更改该尺寸.

I want to change that size when it goes to small screen size or extra small screen size.

推荐答案

您可以创建一个自定义的 .css 文件(例如:site.css)，然后使用 @media 在不同的屏幕尺寸.要在引导程序中覆盖 h1 类，您必须在引导程序之后包含您的自定义 css.下面是site.css中h1的例子:

You can create a custom .css file (for example: site.css) and then use @media to create different behavior on different screen size. To override the h1 class in bootstrap, you have to include your custom css after the bootstrap. Below is the example of 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规则，官方文档见这里.

This is the @media rules which bootstrap currently use, the official docs can be seen in here.

相关文章