Zagnieżdżanie zapytań o media

Question

Domyślnie chcę nadać elementowi ciała zielone obramowanie. Na urządzeniu obsługującym wyświetlacz Retina chcę najpierw sprawdzić rozmiar. Na iPadzie chcę nadać swojemu ciału czerwoną granicę, a na iPhonie chcę nadać mu niebieską granicę. Ale zagnieżdżanie zapytań o media, jak tak nie działa:

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

Nie trzeba użyć operatora and i napisać, że jak dwóch zapytaniami. Możesz to jednak zrobić w SCSS, który skompiluje do CSS, ale połączy je, rozkładając je i używając operatora and.

Jest to powszechny problem, a kiedy po raz pierwszy napisałem LESS lub SCSS, nigdy nie chciałem powracać do pisania tej ręki.

Długo podał 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; 
    } 
} 

zagnieżdżanie zapytań może działać, ale wsparcie różni się w poszczególnych przeglądarkach.