Question

我的目标是解决与WordPress中的背景滑块（插件）重叠的网站内容。下面的媒体查询在设备之间冲突。如果它可以在移动设备上运行，那么它将在ipad或任何横向模式下产生问题。

这是我的CSS媒体查询。

/*------ MEDIA QUERIES------ */


/* Iphone 6,7 Portrait */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  .HomePageBody {
    margin-top: -970px !important;
  }
  .nivoSlider {
    top: 40px;
    /*    position:absolute; */
    min-height: 500px !important;
    width: 100%;
    overflow: hidden;
  }
  /*      .site-content {   
      margin-top:-320px 
        }        */
}


/* Iphone 6,7 Landscape */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  .HomePageBody {
    margin-top: -110px !important;
  }
  .nivoSlider {
    top: 40px;
    /*   position:absolute; */
    min-height: 500px !important;
    width: 100%;
    overflow: hidden;
  }
  .site-content {
    margin-top: -320px !important;
  }
}

Answer 1

由于不建议使用最小/最大设备宽度，因此您可以使用orientation查询纵向和横向。因此，您的代码将像这样：

@media (orientation: landscape) {
...
}

@media (orientation: portrait) {
...
}

媒体查询冲突

1 个答案: