Nesting Media Queries

css, media-queries, responsive-design, retina-display

Solution

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.

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.

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

Nesting queries may work, but support varies across browsers.

Problem

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

Original source