嵌套媒体查询 [英] Nesting Media Queries

问题描述

默认情况下，我想给我的body元素一个绿色边框。在支持视网膜显示的设备上，我想先检查大小。在ipad上，我想给我的身体一个红色的边框，在iphone上我想给它一个蓝色的边框。但嵌套的媒体查询这样不工作：

By default I want to give my body element a green border. On a device that supports retina display I want to check for size first. On an ipad I want to give my body a red border and on an iphone I want to give it a blue border. But nesting media queries like so doesn't work:

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; }
   }
}

推荐答案

没有。您需要使用和运算符，并将其写为两个查询。然而，你可以在SCSS中这样做，它将编译为CSS，但它将通过展开它们并使用和运算符来组合它们。

No. You need to use the and operator and write that as two queries. You can, however, do this in SCSS, which will compile to CSS, but it will combine them by unfolding them and using the and operator.

这是一个常见的问题，一旦我第一次写LESS或SCSS，我就再也不想回头写这个长手了。

This is a common problem, and once I first wrote LESS or SCSS, I didn't ever want to go back to writing this long-hand.

长效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;
  }
}

$ b <

Nesting queries may work, but support varies across browsers.

这篇关于嵌套媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！