Media queries

Un media query es una regla de estilos que aplica dicho estilos cuando sus condiciones se cumplen.

La sintaxis que utiliza es la siguiente:

@media (condicion) {
 .elemento-a-modificar {
  propiedad-a-modificar: nuevo-valor;
 }
}

Dentro de un media query, modificar modificar todos los elementos que querramos, y alterar cualquiera de sus propiedades.

max-width

Es una condición que se cumple siempre que el ancho en pixeles del dispositivo sea menor al indicado. Es decir,
la regla se cumple para dispositivos con un ancho de pantalla hasta el valor indicado.

Por ejemplo, la siguiente media query

@media (max-width: 900px) {
 .one {
  background-color: darkolivegreen;
 }
}

aplica el nuevo estilo al elemento .one cuando
la pantalla del dispositvo es menor a 900px

Si dos reglas de max-width son válidas, gana la de menor valor. Por ejemplo, para:

@media (max-width: 900px) {
 .two {
  background-color: darkolivegreen;
 }
}

@media (max-width: 800px) {
 .two {
  background-color: darksalmon;
 }
}

Cuando la pantalla es menor a 800px, si bien los dos media queries son válidos, aplica el menor de ellos

min-width

Es una condición que se cumple siempre que el ancho en pixeles del dispositivo sea mayor al indicado. Es decir,
la regla se cumple para dispositivos con un ancho de pantalla a partir del valor indicado.

Por ejemplo, la siguiente media query

@media (min-width: 900px) {
 .three {
  background-color: darkorange;
 }
}

aplica el nuevo estilo al elemento .three cuando
la pantalla del dispositvo es mayor a 900px

Si dos reglas de min-width son válidas, gana la de mayor valor. Por ejemplo, para:

@media (min-width: 900px) {
 .four {
  background-color: darkred;
 }
}

@media (min-width: 1000px) {
 .four {
  background-color: chocolate;
 }
}

Cuando la pantalla es mayor a 1000px, si bien los dos media queries son válidos, aplica el mayor de ellos.

Si dos reglas de min-width y max-width son válidas, gana la de max-width. Por ejemplo, para:

@media (max-width: 1100px) {
 .five {
  background-color: lightcoral;
 }
}

@media (min-width: 800px) {
 .five {
  background-color: lawngreen;
 }
}

Cuando la pantalla es menor a 1100px y mayor a 800px, si bien los dos media queries son válidos, aplica el de max-width.

Combinando reglas

Podemos combinar dos reglas de min-width y max-width para definir una rango en donde se aplicaran los estilos. Por ejemplo, para:

@media (min-width: 800px) and (max-width: 1100px) {
 .six {
  background-color: lightcoral;
 }
}

Cuando la pantalla es menor a 1100px y mayor a 800px, ambos media queries son válidos, por lo tanto se aplican los estilos.

Orientación

Es una condición que se cumple dependiendo de la orientación de la pantalla, que puede ser orientation: landscape (horizontal)
y orientation: portrait (vertical). Se puede combinar con otras condiciones.

@media (orientation: landscape) {
 .seven {
  background-color: hotpink;
 }
}

@media (orientation: portrait) {
 .seven {
  background-color: indigo;
 }
}

Layout

Si vamos combinando distintos media queries y ajustando los anchos y los flotados de los elementos, podemos
ir modificando la disposición general del layout de la página dependiendo del ancho del dispositivo