Question

我正在以移动优先方式构建网站，我有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并且嵌套使得它更容易被订购，

有什么建议吗？

移动优先媒体查询iPad与桌面不同

0 个答案: