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是一个附加条件，具体取决于您是否希望将这些样式应用于当前在纵向/横向显示中的视口。

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

例如，您可能不希望在横向模式下更改样式，因为空间较小＆＃34; above the fold＆＃34;。在纵向模式下，您更可能使用粗块标头，而对于横向，您可能希望使用更紧凑的标头来减少不动产使用。

就CSS Tricks文档而言，他们只是展示了如何将目标和目标都作为目标。风景，或只是其中一个。

两个媒体查询之间的差异

1 个答案: