Question

我有一个页面标题<h1> MY JOB </h1>，字体大小为70px。当页面到达一个小断点（手机）时，我想自动将标题大小更改为字体大小36px。

我怎样才能做到这一点？

这是我到目前为止所做的：

＆＃13;

.title-extra-large-5 {
  font-size: 70px !important;
  line-height: 80px;
}
@media (max-width: 767px){
  .xs-title-extra-large-4{
    font-size: 36px !important;
    line-height: 42px !important;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="col-lg-7 col-md-8 col-sm-12 col-xs-12">
          <h2 class="title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4">MY JOB.</h2>
      </div>
  </div>
</div>

＆＃13;

Answer 1

我假设某个屏幕尺寸，你想改变它，对吗？

根据W3SCHOOLS.COM
您可以使用@media属性在特定情况下显示某组样式。

body{
    background-color: blue; /*For screens with more than 480px screen width.*/
}
p{
    font-size:72px;
}
@media screen and (max-width: 480px) { /*Same but for less*/
    body {
        background-color: lightgreen;
    }
    p{
        font-size:36px;
    }
}

将此与您的代码相比较，我会说您的代码大部分都是正确的，但要理解！important 。这可能与其他样式冲突，因此只有在 NOT 希望更改时才使用它，否则将不会应用样式。

编辑： 您似乎有两个类完全相同，但由于！important 而相互冲突。我会说保留其中一个类并使用@media更改样式，这样你就可以保证它会起作用，并且它不会与其他样式发生冲突。

Answer 2

在您的问题中，您提到您的标题为h1，但在您的示例中，您使用h2。

除此之外，你走在正确的轨道上。你只需要改变一些事情：

＆＃13;

h2 {
  font-size: 70px !important;
  line-height: 80px !important;
}
@media (max-width: 767px){
  h2{
    font-size: 36px !important;
    line-height: 42px !important;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
      <div class="col-lg-7 col-md-8">
          <h2>MY JOB.</h2>
      </div>
  </div>
</div>

＆＃13;

您不需要引用col-sm-12和col-xs-12，因为默认情况下引导程序会渲染到它们中。而且您不需要额外的课程title-extra-large-5 md-title-extra-large-3 xs-title-extra-large-4，您可以参考h2或h1。

如何在断点处更改字体大小bootstrap 3

2 个答案: