1

He revisado estos articulos ¿Cómo tengo que situar los media-queries para diseño responsive? y ¿cuál es la sintaxis correcta de las media queries? entre ellos , las respuestas solo hacen referencia a el uso de min-width y max-width solo explicando un solo tema y no ambos.

Cuando se usa ambas @media quieres, como debe ser su estructura correcta:

En el caso de min-width de menor 750 a mayor 992 o al contrario.

Ejemplo:

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Y en el caso de min-width de mayor a menor o al contrario.

Ejemplo:

@media (max-width: 1200px){
    .grid-left {
        float: left;
        width: 100%;
    }
}
@media (max-width: 991px){
    .grid-left {
        float: left;
        width: 70%;
    }
}

Entre sus combinaciones en solo documentos style.css cual se situa primero el min-width o el max-width

Así: o viceversa:

@media (max-width: 1200px){
    .grid-left {
        float: left;
        width: 100%;
    }
}
@media (max-width: 991px){
    .grid-left {
        float: left;
        width: 70%;
    }
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
1
  • Son raros los casos en los que he necesitado usar ambos. Normalmente es uno o el otro. ¿Tienes algún caso concreto en el que lo necesites?
    – Alvaro Montoro
    Commented el 31 may. 2019 a las 15:30

1 respuesta 1

1

El orden es importante por la especificidad de las reglas.

Aunque no hay un orden "correcto" en sí, sí que existe un orden más "natural" de poner las media queries para que no lleven a confusión y a resultados inesperados. Ese orden más "natural" es:

  • En diseño para pantallas grandes primero: los valores del max-width deberían ir del mayor al menor.
  • En diseño para pantallas móviles primero: los valores del min-width debería ir de menor a mayor.

Esto es así porque si se cumple la condición de la media query, se entrará dentro y se aplicarán las reglas. A misma especificidad de una regla, se aplicará la última que aparece en el código. Si pones los min-width en orden descendente (o los max-width en orden ascendente), los estilos especificados en el último van a pisar los del primero porque se entrará en ambos.


Voy a poner un ejemplo básico:

p {
  color: red;
}

@media (min-width: 400px) {
  p {
    color: blue;
  }
}

@media (min-width: 800px) {
  p {
    color: green;
  }
}
<p>Esto es una prueba</p>

En estado normal, el color del texto del párrafo será rojo. Si la pantalla tiene un mínimo de 400px, el color cambiará a azul. Y con un tamaño mínimo de 800px, el color pasará a ser verde. Eso es normal y lo esperado.

Ahora cambia las media queries de orden:

p {
  color: red;
}

@media (min-width: 800px) {
  p {
    color: green;
  }
}

@media (min-width: 400px) {
  p {
    color: blue;
  }
}
<p>Esto es una prueba</p>

En estado normal, el color del texto del párrafo será rojo (lo esperado). Si la pantalla tiene un mínimo de 400px, el color cambiará a azul (lo esperado por la media query). Y con un tamaño mínimo de 800px, el color... ¡seguirá siendo azul en lugar de verde!

¿Por qué ocurre esto si especificas que en pantallas de al menos 800px el color debe ser verde? Porque las pantallas con más de 800px, son también pantallas con más de 400px, se entrará en la siguiente media query y se "sobrescribirá" el valor del color.

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.