嵌套媒体查询

小编典典

嵌套媒体查询

css

默认情况下，我想给我的body元素添加绿色边框。在支持视网膜显示的设备上，我要首先检查尺寸。在ipad上，我想给我的身体一个红色边框，在iphone上，我想给它一个蓝色边框。但是像这样嵌套媒体查询是行不通的：

body { border: 1px solid green; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
   @media (max-width: 768px) and (min-width: 320px) {
      body { border: 1px solid red; }
   }
   @media (max-width: 320px) {
      body { border: 1px solid blue; }
   }
}

阅读 534

2020-05-16

共1个答案

小编典典

否。您需要使用and运算符并将其写为两个查询。但是，您可以在将编译为CSS的SCSS中执行此操作，但是它将通过展开它们并使用and运算符将它们组合在一起。

这是一个普遍的问题，一旦我第一次编写LESS或SCSS，我就再也不想回头写这篇文章了。

长手CSS：

@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) {
  body {
    border: 1px solid red;
  }
}
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 320px) {
  body {
    border: 1px solid blue;
  }
}

嵌套查询可能有效，但是支持在不同的浏览器中有所不同。

2020-05-16