1
respuesta

[Duda] Media querys

Que relevancia tiene el orden de los media querys?

Primero había puesto @media (min-width: 1440px) después @media (min-width: 834px), parte del menú lateral izquierdo no se mostraba completo, sino hasta que invertí el orden fue cuando el menú se mostró completo.

1 respuesta

¡Hola Ivan!

El orden de los media queries es relevante, ya que CSS lee las reglas en el orden en que aparecen y aplica la última regla que cumple con las condiciones. En tu caso, al invertir el orden de los media queries, el menú se mostró completo porque la regla para pantallas más pequeñas se aplicó después de la regla para pantallas más grandes.

Por ejemplo, si tienes dos media queries:

@media (min-width: 834px) {
  /* Estilos para pantallas medianas */
}

@media (min-width: 1440px) {
  /* Estilos para pantallas grandes */
}

Si la pantalla tiene un ancho de 1000px, se aplicarán los estilos del primer media query, ya que cumple con la condición de ancho mínimo de 834px. Sin embargo, si inviertes el orden de los media queries, se aplicarán los estilos del segundo media query, ya que se evalúa después y la pantalla también cumple con la condición de ancho mínimo de 1440px.

Espero que esta explicación te ayude a comprender la importancia del orden de los media queries. ¡Buen trabajo en completar el curso de CSS, Flexbox y Layouts responsivos!

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!