css - una - ¿Es posible anidar consultas de medios dentro de consultas de medios?

subconsultas en access

Question

es posible? Me parece una buena solución, 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

Creo que no es posible, pero puede escribir este formato si está utilizando el preprocesador CSS de SASS.

Por ejemplo, puede copiar este código y pegarlo en https://www.sassmeister.com/ -y ver la salida

HABLAR CON DESCARO A

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

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

Answer 2

Debería poder anidar las reglas de @media esta manera en CSS3 , pero aún no es compatible con la mayoría de los navegadores. Vea esta respuesta para más detalles.

Tendría que expandir completamente y repetir las consultas de medios de nivel superior para que las reglas internas funcionen en todos los navegadores (e 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 3

Si desea hacer esto, la mejor manera es usar 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, aunque la mayoría de las personas colocan en cascada sus reglas de CSS desde una hoja base que cubre las cosas comunes y luego ponen cambios en cada conjunto de reglas de medios.