1

Estoy dandole vueltas al tema de anidar varios media queries dentro de uno solo, algo asi como:

@media (width: 1024px){
  @media (heigth:300px){
     //codigo
  }

  @media (heigth:600px){
     //codigo
  }
}

Seria posible o habría que hacerlo de este tipo:

@media (width: 1024px) and (height: 300px){
   //codigo
}


@media (width: 1024px) and (height: 600px){
   //codigo
}

2 respuestas 2

1

Si miramos en las especificaciones de CSS3, hay una sección en la que trata este tema. Lo llaman Processing of conditional group rules.

Según el ejemplo que provee la especificación (traducción propia):

Por ejemplo, con este conjunto de reglas anidadas:

@media print { // rule (1)
  /* hide navigation controls when printing */
  #navigation { display: none }
  @media (max-width: 12cm) { // rule (2)
    /* keep notes in flow when printing to narrow pages */
    .note { float: none }
  }
}

la condición de la regla marcada (1) es verdadera para medios impresos, y la condición de la regla marcada (2) es verdadera cuando la anchura del área de impresión (que para medios impresos es el cuadro de página) es menor a o igual a 12cm. Por lo tanto, la regla ‘#navigation { display: none }’ se aplica siempre que esta hoja de estilos se aplique a medios impresos, y la regla ‘.note { float: none }’ es aplicada solo cuando la hoja de estilos es aplicada a medios impresos y la anchura del cuadro de la página es menor que o igual a 12 centímetros.

NOTA IMPORTANTE: Recuerda que el orden de los media queries es importante y, por lo tanto, tienen que ir de menos a más resctrictivo en orden descendente (el orden de CSS). Es decir, si tienes un max-width de 600px como restricción y otro de 400px debería ir en primer lugar el de 600px.

0

Hasta donde yo se no se pueden anidar. Tendrías que usar la segunda forma y la sintaxis tampoco es correcta, se indica si son medidas máximas o mínimas junto con el ancho o el alto. Por ejemplo:

@media (max-height: 900px) and (max-width: 500px) {
    /* Tu CSS aquí */
}

Puedes mirar tutoriales sobre el uso de media-queries como estos: https://developer.mozilla.org/es/docs/CSS/Media_queries https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.