Question

使用Bootstrap 3来解决@media查询。在查看教程时，以下查询结构已多次出现。但是，我还有问题。

min-width：1200px正确渲染字体大小（92px）和背景（红色），min-width：992px正确渲染字体大小（48px）和背景（绿色）。

然而，当我低于那两个，min-width：768px和max-width：768px时，它们的属性不会应用于元素。感谢任何帮助！

    @media(max-width:767px){
      .jumbotron h1 {
        font-size: 12px;
      }
    
       body {
        background: yellow;
      }
    }
    
    @media(min-width:768px){
      .jumbotron h1 {
        font-size: 24px;
      }
    
       body {
        background: blue;
      }
    }
    
    
    @media(min-width:992px){
      .jumbotron h1 {
        font-size: 48px;
      }
    
       body {
        background: green;
      }
    }
    
    @media(min-width:1200px){
      .jumbotron h1 {
        font-size: 92px;
      }
    
      body {
        background: red;
      }
    }

<body>
  <p class="jumbotron">
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
  </p>
</body>

Answer 1

唯一的问题是你在一个段落中有一个标题。有关详细信息，请参阅此问题：Should a heading be inside or outside a <p>?

简而言之，标题不能在段落中。如果您希望获得相同的结果但不会遇到此问题，请改为使用 span ：

＆＃13;

@media(max-width:767px){
      .jumbotron span {
        font-size: 12px;
      }
    
       body {
        background: yellow;
      }
    }
    
    @media(min-width:768px){
      .jumbotron span {
        font-size: 24px;
      }
    
       body {
        background: blue;
      }
    }
    
    
    @media(min-width:992px){
      .jumbotron span {
        font-size: 48px;
      }
    
       body {
        background: green;
      }
    }
    
    @media(min-width:1200px){
      .jumbotron span {
        font-size: 92px;
      }
    
      body {
        background: red;
      }
    }

＆＃13;

<body>
  <p class="jumbotron">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
  </p>
</body>

＆＃13;

为什么@media查询不会更改特定屏幕尺寸的元素？

1 个答案: