Css 移动第一媒体查询iPad与桌面不同

我正在建立一个网站上的移动第一的方法，我有3个不同的设计

• 移动：宽度高达767px（红色）

• 平板电脑：从768px到979px（蓝色）

• 桌面：从980px（绿色）

iPad在纵向和横向模式下都必须表现为平板电脑设计。（蓝色）

然后我有一个媒体问题：

body{
  background-color: red;
}

@media (min-width: 768px),
only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

   body {
     background-color: blue;
   }
}

@media (min-width: 980px) {
   body {
     background-color: green;
   }
}

问题是iPad采用了桌面设计（绿色）。这是因为媒体查询的顺序会产生影响，所以它会得到蓝色，然后是绿色，因为之后会进行编码

我找到了一个解决方案，它将为平板电脑添加一个最大宽度，并对媒体查询进行重新排序，这样桌面将首先出现，然后是平板电脑：

body{
  background-color: red;
}

@media (min-width: 980px) {
   body {
     background-color: green;
   }
}


@media (min-width: 768px) and (max-width: 979px),
only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

   body {
     background-color: blue;
   }
}   

但如果可能的话，我想保留手机、平板电脑和台式机等订单。主要是因为我使用的是Sass，如果订购，嵌套会更容易

---

有什么建议吗？

您是否尝试过仅使用最大宽度？嗯，这是移动优先的方法，因此必须使用最小宽度媒体查询