如何设置单独的媒体查询以影响相同的元素？

Question

我正在尝试在多个 iPhone 屏幕上优化我的移动网页体验，尤其是 5/5s 和 6/6s。我试图根据屏幕以不同的方式影响元素的位置属性，即“如果屏幕是 5/5 秒，请执行此操作”，“如果屏幕是 6/6 秒，请执行此操作”。但是，一个查询只是覆盖另一个查询，而不是做自己的特定事情。

这是我的 CSS：

/* for iPhone 6/6S  */
@media (max-width:730px) {
  .fore-man {
    top: 1100px;
}
/*  for iPhone 5/5S */
@media (max-width:560px) {
  .fore-man {
    top: 1100px;
}

如何将其更正为特定于屏幕而不只是覆盖先前的查询？

Answer 1

将最小宽度添加到您的 6/6s 查询中是否有用？

/* for iPhone 6/6S  */
@media (max-width:730px) and (min-width: 561px) {
    .fore-man {
      top: 1100px;
    }
}
/*  for iPhone 5/5S */
@media (max-width:560px) {
    .fore-man {
      top: 1100px;
    }
}

根据这篇文章，定位设备屏幕最好使用设备宽度属性。

看看，here

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}