@media查询中的一个被跳过

问题描述

编辑我实际上已经通过在HTML内部重新创建引导网格来解决此问题，从而消除了对创建的大多数媒体查询的需求。感谢您的所有帮助！

我遇到了问题，似乎找不到问题。

我的Web服务器上正在运行一个项目，除一个项目外，所有媒体查询均有效。好像跳过了。它显示在inspect元素中，我还验证了似乎没有发现任何错误的CSS，我的索引中也有Meta标记。

@media screen and (max-width:1199px) {...}不起作用。

希望您能帮助我摆脱这个问题，谢谢！

这是CSS：

@media screen and (max-width: 1319px) {
  .release-title {
    margin-left:30px;
  }
  .release-desc {
    margin-left:30px;
  }

  .trend-ct .title {
    margin-left:30px;
  }

  .trend-ct .desc {
    margin-left:30px;
  }

  .newshoe-title {
    margin-left:30px;
  }

  .newshoe-desc {
    margin-left:30px;
  }
}

@media screen and (max-width: 1199px) {
  .geeks {
    height:600px;
  }

  .img-title {
    padding-top:5px;
  }

  .launch-title {
    margin-top:-10px;
  }
  .release-title {
    margin-left:30px;
    margin-top:10px;
  }

  .release-desc {
    margin-left:30px;
  }

  .trend-ct .title {
    margin-top:10px;
    margin-left:30px;
  }

  .trend-ct .desc {
    margin-left:30px;
  }

  .trend-ct {
    height:480px;
  }

  .trend-ct .desc:hover {
    margin-left:60px;
  }

  .newshoe-title {
    margin-top:10px;
    margin-left:30px;
  }

  .newshoe-desc {
    margin-left:30px;
  }

  .subBox {
    margin-top:-50px;
  }

  .footer {
    height:400px;
  }
}

@media screen and (max-width: 1090px) {
  .geeks {
    height:100px;
  }

  .img-title {
    padding-top:5px;
  }

  .launch-title {
    margin-top:20px;
  }
  .release-title {
    margin-left:110px;
    margin-top:-100px;
  }

  .release-desc {
    margin-left:110px;
  }

  .trend-ct .title {
    margin-top:-110px;
    margin-left:110px;
  }

  .trend-ct .desc {
    margin-left:110px;
  }

  .trend-ct {
    height:800px;
  }

  .trend-ct .desc:hover {
    margin-left:165px;
  }

  .newshoe-title {
    margin-top:-110px;
    margin-left:110px;
  }

  .newshoe-desc {
    margin-left:110px;
  }

  .subBox {
    margin-top:-325px;
  }

  .footer {
    height:830px;
  }
}

@media screen and (max-width: 844px) {
  .between-ct {
    height:800px;
  }

  .subBox {
    margin-top:50px;
    float:left;
  }

  .nav-link{
    display:block;
    width:100%;
    padding:20px;
    font-size:21px;
    font-weight:normal;
  }
}

@media screen and (max-width: 813px) {
  .lookup {
    width:15%;
  }
}

@media screen and (max-width: 538px) {
  .lookup {
    width:20%;
  }
}

@media screen and (max-width: 445px) {
  .lookup {
    font-size:13px;
    top:-2px;
  }

  .subBox {
    width:100%;
  }
}

@media screen and (max-width: 403px) {
  .between-ct {
    height:850px;
  }

  .lookup {
    width:25%;
  }
}

这是我的Meta标签的标题： <Meta name="viewport" content="width=device-width,initial-scale=1">

解决方法

尝试在only之后添加@media：

@media only screen and (max-width: 1319px) {
  .release-title {
    margin-left:30px;
  }
  .release-desc {
    margin-left:30px;
  }

  .trend-ct .title {
    margin-left:30px;
  }

  .trend-ct .desc {
    margin-left:30px;
  }

  .newshoe-title {
    margin-left:30px;
  }

  .newshoe-desc {
    margin-left:30px;
  }
}

@media only screen and (max-width: 1199px) {
  .geeks {
    height:600px;
  }

  .img-title {
    padding-top:5px;
  }

  .launch-title {
    margin-top:-10px;
  }
  .release-title {
    margin-left:30px;
    margin-top:10px;
  }

  .release-desc {
    margin-left:30px;
  }

  .trend-ct .title {
    margin-top:10px;
    margin-left:30px;
  }

  .trend-ct .desc {
    margin-left:30px;
  }

  .trend-ct {
    height:480px;
  }

  .trend-ct .desc:hover {
    margin-left:60px;
  }

  .newshoe-title {
    margin-top:10px;
    margin-left:30px;
  }

  .newshoe-desc {
    margin-left:30px;
  }

  .subbox {
    margin-top:-50px;
  }

  .footer {
    height:400px;
  }
}

@media only screen and (max-width: 1090px) {
  .geeks {
    height:100px;
  }

  .img-title {
    padding-top:5px;
  }

  .launch-title {
    margin-top:20px;
  }
  .release-title {
    margin-left:110px;
    margin-top:-100px;
  }

  .release-desc {
    margin-left:110px;
  }

  .trend-ct .title {
    margin-top:-110px;
    margin-left:110px;
  }

  .trend-ct .desc {
    margin-left:110px;
  }

  .trend-ct {
    height:800px;
  }

  .trend-ct .desc:hover {
    margin-left:165px;
  }

  .newshoe-title {
    margin-top:-110px;
    margin-left:110px;
  }

  .newshoe-desc {
    margin-left:110px;
  }

  .subbox {
    margin-top:-325px;
  }

  .footer {
    height:830px;
  }
}

@media only screen and (max-width: 844px) {
  .between-ct {
    height:800px;
  }

  .subbox {
    margin-top:50px;
    float:left;
  }

  .nav-link{
    display:block;
    width:100%;
    padding:20px;
    font-size:21px;
    font-weight:normal;
  }
}

@media only screen and (max-width: 813px) {
  .lookup {
    width:15%;
  }
}

@media only screen and (max-width: 538px) {
  .lookup {
    width:20%;
  }
}

@media only screen and (max-width: 445px) {
  .lookup {
    font-size:13px;
    top:-2px;
  }

  .subbox {
    width:100%;
  }
}

@media only screen and (max-width: 403px) {
  .between-ct {
    height:850px;
  }

  .lookup {
    width:25%;
  }
}@media only screen and (max-width: 1319px) {
  .release-title {
    margin-left:30px;
  }
  .release-desc {
    margin-left:30px;
  }

  .trend-ct .title {
    margin-left:30px;
  }

  .trend-ct .desc {
    margin-left:30px;
  }

  .newshoe-title {
    margin-left:30px;
  }

  .newshoe-desc {
    margin-left:30px;
  }
}

@media only screen and (max-width: 1199px) {
  .geeks {
    height:600px;
  }

  .img-title {
    padding-top:5px;
  }

  .launch-title {
    margin-top:-10px;
  }
  .release-title {
    margin-left:30px;
    margin-top:10px;
  }

  .release-desc {
    margin-left:30px;
  }

  .trend-ct .title {
    margin-top:10px;
    margin-left:30px;
  }

  .trend-ct .desc {
    margin-left:30px;
  }

  .trend-ct {
    height:480px;
  }

  .trend-ct .desc:hover {
    margin-left:60px;
  }

  .newshoe-title {
    margin-top:10px;
    margin-left:30px;
  }

  .newshoe-desc {
    margin-left:30px;
  }

  .subbox {
    margin-top:-50px;
  }

  .footer {
    height:400px;
  }
}

@media only screen and (max-width: 1090px) {
  .geeks {
    height:100px;
  }

  .img-title {
    padding-top:5px;
  }

  .launch-title {
    margin-top:20px;
  }
  .release-title {
    margin-left:110px;
    margin-top:-100px;
  }

  .release-desc {
    margin-left:110px;
  }

  .trend-ct .title {
    margin-top:-110px;
    margin-left:110px;
  }

  .trend-ct .desc {
    margin-left:110px;
  }

  .trend-ct {
    height:800px;
  }

  .trend-ct .desc:hover {
    margin-left:165px;
  }

  .newshoe-title {
    margin-top:-110px;
    margin-left:110px;
  }

  .newshoe-desc {
    margin-left:110px;
  }

  .subbox {
    margin-top:-325px;
  }

  .footer {
    height:830px;
  }
}

@media only screen and (max-width: 844px) {
  .between-ct {
    height:800px;
  }

  .subbox {
    margin-top:50px;
    float:left;
  }

  .nav-link{
    display:block;
    width:100%;
    padding:20px;
    font-size:21px;
    font-weight:normal;
  }
}

@media only screen and (max-width: 813px) {
  .lookup {
    width:15%;
  }
}

@media only screen and (max-width: 538px) {
  .lookup {
    width:20%;
  }
}

@media only screen and (max-width: 445px) {
  .lookup {
    font-size:13px;
    top:-2px;
  }

  .subbox {
    width:100%;
  }
}

@media only screen and (max-width: 403px) {
  .between-ct {
    height:850px;
  }

  .lookup {
    width:25%;
  }
}