È possibile nidificare le query multimediali all'interno delle query multimediali?

Question

È possibile? Mi sembra una buona soluzione, ma non sono sicuro che funzionerà.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

    /* Code for both portrait and landscape */ 

    @media (orientation:portrait) { 

     /* Code for just portrait */ 

    } 

    @media (orientation:landscape) { 

     /* Code for just landscape */ 

    } 

} 

Answer 1

si dovrebbe essere in grado di nest @media rules this way in CSS3, ma non è ancora supportato dalla maggior parte dei browser. Vedi this answer per i dettagli.

Si dovrà estendere completamente e ripetere le query multimediali di alto livello per le regole interne per farlo funzionare tutti i browser (e immagino che il processore SCSS genererebbe qualcosa di simile):

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) { 
    /* Code for both portrait and landscape */ 
} 

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: portrait) { 

    /* Code for just portrait */ 

} 

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 480px) 
and (orientation: landscape) { 

    /* Code for just landscape */ 

} 

Answer 2

Se volevo fare questo il modo migliore è usare la query multimediale di alto livello in un tag link, e poi le altre query all'interno del foglio collegato.

In pratica, però, la maggior parte delle persone mette in cascata le proprie regole CSS da un foglio di base che copre le cose comuni e quindi le modifiche apportate a ogni regola.

Answer 3

Penso che non sia possibile ma è possibile scrivere questo formato Se si utilizza il pre-processore SASS css.

esempio, è possibile copiare il codice e incolla per https://www.sassmeister.com/ -e guardare l'uscita

SASS

@media only screen and (max-width: 767px) { 
    body{ 
    color:red; 
    } 
    @media (orientation:portrait) { 
     body{ 
     color:green; 
     } 
    } 
    @media (orientation:landscape) { 
     body{ 
     color:orange; 
     } 
    } 
} 

CSS uscita

@media only screen and (max-width: 767px) { 
    body { 
    color: red; 
    } 
} 
@media only screen and (max-width: 767px) and (orientation: portrait) { 
    body { 
    color: green; 
    } 
} 
@media only screen and (max-width: 767px) and (orientation: landscape) { 
    body { 
    color: orange; 
    } 
}