0

我正在建立一个基于移动优先方法的网站，我有 3 种不同的设计。

  • 移动：宽度最大 767px（红色）

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

  • 桌面：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，如果订购，嵌套会更容易，

有什么建议吗？

4

0 回答 0