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

2023年5月17日 225次阅读

使用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>

最佳答案 唯一的问题是你在一个段落中有一个标题.有关更多信息,请参阅此问题：
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>
点赞