Nesting Media Query

Question

Per impostazione predefinita, desidero dare al bordo del mio elemento un bordo verde. Su un dispositivo che supporta la visualizzazione della retina, desidero prima controllare la dimensione. Su un ipad voglio dare al mio corpo un bordo rosso e su un iphone voglio dargli un bordo blu. Ma le media query di nidificazione in questo modo non funziona:

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

No. È necessario utilizzare l'operatore and e scrivere che come due query. Tuttavia, è possibile farlo in SCSS, che verrà compilato in CSS, ma lo combinerà aprendoli e utilizzando l'operatore and.

Questo è un problema comune, e una volta che ho scritto per la prima volta LESS o SCSS, non ho mai voluto tornare a scrivere questa mano lunga.

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

query Nesting può funzionare, ma il supporto varia tra i browser.