Question

我正在尝试为我的网站添加完整的响应能力。但是，由于某种原因，它不会读取低于980px宽度的部分。这是我的CSS：

@media screen and (max-width:1029px){
    h1{
        font-size: 75px;
    }
    h2{
        font-size: 25px;
    }
}
@media screen and (max-width:980px){
    h1{
        font-size: 70px;
    }
    h2{
        font-size: 20px;
    }
}
@media screen and (max-width:954px){
    h1{
        font-size: 65px;
    }
    h2{
        font-size: 15px;
    }
}

980px部分是可以读取的最后一部分，如果我将其更改为979px则会停止读取，就好像它不存在一样。 !important不会改变任何事情。我能做什么？为什么有一个980px的神奇障碍？

Answer 1

确保<meta name="viewport" content="width=device-width,initial-scale=1">元素

中有<head>

Answer 2

我认为你应该重新调整你的媒体，这对你来说可能是有用的。

我做了一个小提琴，它可以随心所欲地使用media query

<强> working fiddle

@media screen and (max-width:954px) {
  h1 {
    font-size: 65px;
  }
  h2 {
    font-size: 15px;
  }
}

@media screen and (max-width:1029px) {
  h1 {
    font-size: 75px;
  }
  h2 {
    font-size: 25px;
  }
  @media screen and (max-width:980px) {
    h1 {
      font-size: 70px;
    }
    h2 {
      font-size: 20px;
    }
  }
}

@media在980px宽度

2 个答案: