css - 媒体查询冲突

Question

我的目标是解决网站内容与 WordPress 中的背景 slider (插件)重叠的问题。下面的媒体查询在设备之间存在冲突。如果它适用于移动设备，那么它会在 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

由于 min/max-device-width 已弃用，您可以使用 orientation纵向和横向查询。 所以你的代码将是这样的:

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

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