html - 如何设置单独的媒体查询来影响同一个元素？

Question

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

这是我的 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) { 

}