媒体查询冲突

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

由于最小/最大设备宽度已弃用，因此可以使用纵向和横向方向查询。所以你的代码将是这样的：

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