更改< h1>的大小响应式Bootstrap时标记 [英] Change size of <h1> tag when responsive Bootstrap

问题描述

当<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;
  }
}

这是引导程序当前使用的@media规则，可以在这里.

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

这篇关于更改< h1>的大小响应式Bootstrap时标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！