css - 两个媒体查询之间的区别

Question

根据 CSS tricks ，iPhone 4 的媒体查询是:

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

}

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

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

} 

我的问题是，/* Portrait and Landscape */ 媒体查询和 /* Portrait */, /* Landscape * 有什么区别/ 媒体查询？使用 /* Portrait and Landscape */ 还不够吗？

Answer 1

orientation 是一个附加条件，取决于您是否希望将这些样式应用于当前处于纵向/横向显示中的视口(viewport)。

即使您处于landscape 模式，max-device-width: 480px 属性也适用。

例如，由于空间“above the fold”，您可能不希望更改横向模式下的样式。例如，在纵向模式下，您更有可能使用粗大的标题，而在横向模式下，您可能希望使用更紧凑的标题以减少房地产使用。

---

就 CSS 技巧文档而言，它们只是展示了如何同时定位纵向和横向，或仅定位其中之一。