为什么@media 查询不改变特定屏幕尺寸上的元素？答案

【问题标题】：Why doesn't the @media query change elements on particular screen sizes?为什么@media 查询不改变特定屏幕尺寸上的元素？
【发布时间】：2016-12-14 08:39:48
【问题描述】：

在 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>

【问题讨论】：

你在哪些浏览器中测试过这个？
@Miloshio 在 Chrome 和 Firefox 中都以这种方式呈现，在 IE 11 中根本不起作用。
@lookininward 媒体查询按预期工作。我可以在较小的屏幕尺寸上看到黄色和蓝色背景。请检查问题中的 sn-p。
@feeela 这很奇怪。一旦我点击：@media(min-width:768px){ .jumbotron h1 { font-size: 24px; } 身体 { 背景：蓝色； } } 它默认为白色背景。
@lookininward 我看不到您描述的行为。也许应用了其他一些样式表，这不是这个问题的一部分？

标签： css twitter-bootstrap twitter-bootstrap-3 responsive-design media-queries

【解决方案1】：

唯一的问题是段落中有标题。更多信息请参考这个问题：Should a heading be inside or outside a <p>?

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

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

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

【讨论】：

或者，只使用<div class="jumbotron"> 而不是<p>。
这是正确的，但考虑到 OP 可能希望在没有
的情况下换行，我选择了跨度。
这实际上是违反直觉的。使用div，OP 可以在其中使用多个段落，但使用p 标签，他们可以仅使用<br/>，因为其他任何内容都是无效的。