如何避免覆盖不同视口大小的 iPad 的 CSS 媒体查询

Question

我正在尝试编写CSS来调整不同视口大小的iPad的UI，例如iPad Pro 11,12和iPad Air。但样式会被最后一个媒体查询覆盖。

@media only screen and (max-width: 768px) {//CSS}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2){
 // CSS
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2){
 //CSS
}

@media only screen and (min-device-width: 820px) and (max-device-width: 1180px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2){ 
   //CSS
}

@media only screen and (min-device-width: 820px) and (max-device-width: 1180px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2){
  //CSS
}

@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2){
//CSS
 }

@media only screen and (min-device-width: 834px) and (max-device-width: 1194px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2){
  //CSS
}

我希望媒体查询不会被覆盖，并且样式适用于哪个设备应该仅适用于该设备。 注意：就我而言，设备是 iPad。

Answer 1

为了减少 HTTP 调用，这也可以在现有的通用 CSS 文件中使用：

@media all 和（设备宽度：768px）和（设备高度：1024px）和（方向：纵向）{ .ipad-portrait { 颜色：红色； } /* 你的 ipad 纵向 CSS 规则 */ }

@media all 和（设备宽度：102

enter code here

4px）和（设备高度：768px）和（方向：横向）{ .ipad-landscape { 颜色：蓝色； } /* 你的 ipad 横向 CSS 规则 */ }