¿Es posible anidar consultas de medios en consultas de medios?

Question

¿Esto es posible? Parece una buena solución para mí, pero no estoy seguro de si funcionará.

@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

usted debería ser capaz de nest @media rules this way in CSS3, pero aún no es apoyada por la mayoría de los navegadores. Ver this answer para más detalles.

Usted tendría que expandir completamente y repetir las preguntas de los medios de nivel superior de las reglas internas para que funcione en todos los navegadores (y me imagino que el procesador SCSS generaría algo similar):

@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

Si Quería hacer esto de la mejor manera es utilizar la consulta de medios de alto nivel en una etiqueta de enlace, y luego las otras consultas dentro de la hoja vinculada.

En la práctica, la mayoría de las personas implementan en cascada sus reglas de CSS desde una hoja de base que cubre las cosas comunes y luego realiza cambios a eso en cada regla de medios.

Answer 3

Creo que no es posible pero puede escribir este formato Si está utilizando el preprocesador SASS css.

ejemplo, puede copiar y pegar el código de https://www.sassmeister.com/ -y ver la salida

SASS

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

CSS salida

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