Verschachtelung von Media-Anfragen

Question

Standardmäßig möchte ich meinem Body-Element einen grünen Rahmen geben. Auf einem Gerät, das Retina-Display unterstützt, möchte ich zuerst die Größe überprüfen. Auf einem iPad möchte ich meinem Körper einen roten Rahmen geben und auf einem Iphone möchte ich ihm einen blauen Rahmen geben. Aber Verschachtelung Medienanfragen wie so nicht funktioniert:

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

Answer 1

Nein, Sie müssen den and Operator verwenden und schreiben, dass als zwei Abfragen. Sie können dies jedoch in SCSS tun, das nach CSS kompiliert wird, aber es kombiniert sie, indem es sie entfaltet und den Operator and verwendet.

Dies ist ein häufiges Problem, und sobald ich zum ersten Mal WENIGER oder SCSS schrieb, wollte ich nie wieder zu dieser Langhand schreiben. CSS

Langgeben:

@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-Abfragen arbeiten können, aber Unterstützung variiert je nach Browser.