css - Nesting Media Queries -

by default want give body element green border. on device supports retina display want check size first. on ipad want give body red border , on iphone want give blue border. nesting media queries doesn't work:

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

no. need use and operator , write 2 queries. can, however, in scss, compile css, combine them unfolding them , using and operator.

this common problem, , once first wrote less or scss, didn't ever want go writing long-hand.

long-handed css:

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

nesting queries may work, support varies across browsers.