Media queries CSS para cumplir las necesidades del diseño responsive

Las media queries se introdujeron en CSS3 para dar respuesta a las necesidades del diseño web responsive. Mediante ellas podemos definir estilos condicionales, aplicables únicamente en determinadas situaciones. El uso más extendido de las media queries es para establecer estilos diferentes para cada ancho de pantalla.

1. Media queries en CSS para cada ancho de pantalla

Para definir una media query en CSS se utiliza la regla @media en la hoja de estilos. Se pueden definir todas las media queries que necesitemos según los diseños para cada ancho de pantalla.

¡Ojo! Como vimos en la unidad anterior, es necesario enlazar la hoja de estilo externa en el documento HTML.

Para definir los estilos para cada ancho de pantalla utilizaremos puntos de ruptura. Todos los estilos que no se incluyan dentro de una media query se verán en todos los tamaños de dispositivo.

Existen varias formas de definir el ancho del dispositivo dentro de la regla @media:

1.1. Media query indicando el ancho mínimo de pantalla

Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho mínimo de 768px (punto de ruptura de 768px).

@media (min-width: 768px) {
  /* Estilos para pantallas con un ancho mínimo de 768px */
}

1.2. Media query indicando el ancho máximo de pantalla

Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho máximo de 767px (punto de ruptura de 767px).

@media (max-width: 767px) {
  /* Estilos para pantallas con un ancho máximo de 768px */
}

1.3. Media query combinando múltiples condiciones

Es posible combinar múltiples condiciones en una media query para aplicar estilos solo cuando se cumplan todas las condiciones. Todos los estilos que se incluyan en el interior de la siguiente media query serán utilizados en pantallas que tengan un ancho entre 768px y 1024px (puntos de ruptura de 768px y 1024px).

@media (min-width: 768px) and (max-width: 1024px) {
  /* Estilos para pantallas con un ancho entre 768px y 1024px */
}

1.4. Media query para Mobile First

En un enfoque «Mobile First«, los estilos base están diseñados para dispositivos móviles y luego se aplican ajustes mediante media queries para tabletas y escritorios. Veamos un ejemplo:

/* Estilos base para dispositivos móviles */
body {
    background-color: red;
}
p:after {
     color: white;
     content:"Móvil";
 }
/* Media query para tabletas */
@media (min-width: 600px) {
    body {
        background-color: green; 
    }
    p:after {
       color: white;
       content:"Tablet";
    }
}
/* Media query para desktop */
@media (min-width: 1024px) {
    body {
        background-color: blue;
    }
    p:after {
       color: white;
       content:"Escritorio";
    }
}

1.5. Media query para Desktop First

En un enfoque «Desktop First», los estilos base están diseñados para escritorios y luego se aplican ajustes mediante media queries para tabletas y dispositivos móviles. Veamos el mismo ejemplo anterior pero ahora con este nuevo enfoque:

/* Estilos base para escritorios */
body {
    background-color: blue;
}
p:after {
    color: white;
    content: "Escritorio";
}
/* Media query para tabletas (por ejemplo, anchura entre 600px y 1024px) */
@media (min-width: 600px) and (max-width: 1023px) {
    body {
        background-color: green;
    }
    p:after {
        content: "Tablet";
    }
}
/* Media query para dispositivos móviles (por ejemplo, anchura menor a 600px) */
@media (max-width: 599px) {
    body {
        background-color: red;
    }
    p:after {
        content: "Móvil";
    }
}

1.6. No cometas el siguiente error al definir Media Queries

No cometas el siguiente error al definir las Media Queries de tus proyectos web:

/*Esta superposición en el ancho igual a 600px puede conducir a resultados impredecibles o conflictos en la aplicación de estilos.*/
@media (min-width: 600px) and (max-width: 1024px) {
    /* Estilos para tamaños de pantalla entre 600px y 1024px */
}
@media (max-width: 600px) {
    /* Estilos para tamaños de pantalla menores a 600px */
}

En este ejemplo, la segunda media query (@media (max-width: 600px)) afectará a las pantallas con un ancho menor a 600 píxeles, lo que incluiría automáticamente a todas las pantallas dentro del rango de 600 a 1024 píxeles definido en la primera media query. Esta superposición en el ancho igual a 600px puede conducir a resultados impredecibles o conflictos en la aplicación de estilos.

Problemas:

1. Conflicto de estilos: Cuando la pantalla tiene un ancho menor a 600px, ambas media queries se aplicarán, lo que podría llevar a conflictos en la aplicación de estilos. Las reglas en la segunda media query podrían anular las definidas en la primera.
2. Prioridad de la última media query: En CSS, cuando hay reglas conflictivas, se aplica la regla definida en el último lugar. En este caso, si la pantalla tiene un ancho menor a 600px, los estilos definidos en la segunda media query sobrescribirán los de la primera.

Cómo corregirlo:

Para evitar estos problemas, es recomendable revisar y organizar cuidadosamente las media queries. En este caso, podemos solucionarlo de la siguiente manera:

Solución:

@media (min-width: 600px) and (max-width: 1024px) {
    /* Estilos para tamaños de pantalla entre 600px y 1024px */
}

@media (max-width: 599px) {
    /* Estilos para tamaños de pantalla menores a 600px */
}

2. Ejemplos de Media queries para definir el ancho del dispositivo

Ejemplo 1:

Supongamos que queremos aplicar un estilo diferente en pantallas de ancho superior a 1024px, inferior a 1024px e inferior a 480px, tendríamos las siguientes media queries:

.click:after {
    content:"En pantalla grande";
}
@media (max-width: 1024px) {
    .click:after {
        content:"Tablet";
    }
}
@media (max-width: 480px) {
    .click:after {
        content:"Movil";
    }
}

Ver ejemplo completo:

Ejemplo 2:

La primera media query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 450 y 800 píxeles y la segunda media query para pantallas menores a 449 píxeles.

.click:after {
    content:"En pantalla grande";
}
@media (min-width: 450px) and (max-width: 800px) { 
       .click:after {
        content:"Tablet";
    }
}

@media (max-width: 449px) {
    .click:after {
        content:"Movil";
    }
}

Ver ejemplo completo:

Ejemplo 3:

Se aplican media queries para ajustar el diseño en diferentes tamaños de pantalla:

• Por defecto las 4 imágenes se posicionan en línea usando flotantes con un ancho del 25%.
• @media (max-width: 1000px): Cuando el ancho de la pantalla es igual o menor a 1000px, el ancho de las imágenes se cambia al 33.33%, por tanto habrá 3 imágenes arriba y una abajo.
• @media (max-width: 700px): Cuando el ancho de la pantalla es igual o menor a 700px:
  • El ancho de las imágenes se cambia al 50% para permitir dos imágenes arriba y dos abajo.
  • Se añaden reglas para el div que contiene dos imágenes para limpiar el float y establecer el ancho al 100%, de modo que las imágenes dentro del div se apilen debajo de las dos anteriores.
• @media (max-width: 400px): Cuando el ancho de la pantalla es igual o menor a 400px, las imágenes se ajustan al 100% de ancho para adaptarse a pantallas más pequeñas, por tano las imágenes se posicionan unas debajo de las otras.

img{
  width: 25%;
  float: left;
  box-sizing: border-box;
  padding: 25px;
}
@media (max-width: 1000px) {
  img{ 
    width: 33.33%;
  }
}
@media (max-width: 700px) {
   img{
     width: 50%;
   }
  div{ 
    float:none;
    display:block;
    width: 100%;
  }
}
@media (max-width: 400px) {
   img{ 
     width: 100%;
  }
}

Ejemplo 4:

Este código CSS está diseñado para dar estilo a una página HTML que contiene un encabezado, un menú de navegación, un área principal (main) con dos secciones, un área lateral (aside) con un listado, y un pie de página (footer) con cuatro contenedores de contenido.

General:

• Se establece el estilo del cuerpo (body), como el tipo de fuente, el margen y el relleno, para asegurar una base consistente.

Encabezado (header):

• Se configura un fondo oscuro (#333), texto blanco (#fff), centrado y relleno de 20 píxeles para el encabezado.

Menú de navegación (nav):

• El menú de navegación tiene un fondo más oscuro (#444), texto blanco (#fff), y un relleno de 10 píxeles.
• Los elementos de la lista (nav ul) se centran y se eliminan los estilos de lista predeterminados.

Menú de navegación – Enlaces (nav a):

• Los enlaces del menú tienen un color blanco (white).

Área principal (main):

• El área principal (main) tiene un relleno de 20 píxeles y ocupa inicialmente el 80% del ancho con un 20% reservado para el aside. Se utiliza float para alinear estos elementos.

Secciones (section):

• Las secciones son elementos de bloque (display: block;) y tienen un margen derecho de 20 píxeles.

Área lateral (aside):

• El área lateral (aside) tiene un fondo gris claro (#eee), un relleno de 20 píxeles, ocupa inicialmente el 20% del ancho, y utiliza float para estar junto al main.
• Se utiliza overflow: hidden; para contener sus elementos.

Pie de página (footer):

• El pie de página (footer) tiene un fondo oscuro (#333), texto blanco (#fff), un relleno de 20 píxeles y se utiliza clear:both; para asegurarse de que no haya elementos flotantes a su alrededor.

Contenedores del pie de página (footer div):

• Los contenedores del pie de página (footer div) son elementos de bloque (display: block;) con un margen derecho de 20 píxeles, un relleno de 20 píxeles, y ocupan inicialmente el 25% del ancho.

Media queries:

• Para pantallas de hasta 1000px:
• main y aside ocupan el 100% del ancho.
• Los contenedores del pie de página (footer div) ocupan el 50% del ancho.
• Para pantallas de hasta 600px:
• Los elementos del menú de navegación se convierten en bloques.
• main, section, aside, y los contenedores del pie de página (footer div) ocupan el 100% del ancho y eliminan float.

Mejoras posibles:

• Se podrían agregar márgenes y espaciado para mejorar la legibilidad y el diseño.
• Se podría considerar utilizar flexbox o grid para simplificar el diseño y hacerlo más flexible.

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}
nav {
  background-color: #444;
  color: #fff;
  padding: 10px;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
nav li {
  display: inline;
  margin-right: 20px;
}
nav a{
  color:white;
}
main {
  padding: 20px;
  float: left;
  box-sizing: border-box;
  width: 80%

}
section {
  display:block;
  box-sizing: border-box;
  margin-right: 20px;
}
aside {
  box-sizing: border-box;
  padding: 20px;
  float: left;
  width: 20%;
  background-color: #eee;
  overflow: hidden;
}
footer {
  clear:both;
  text-align: center;
  background-color: #333;
  color: #fff;
  padding: 20px;
  overflow: hidden;
}
footer div {
  float: left;
  padding: 20px;
  width: 25%;
  box-sizing: border-box;
}
@media (max-width: 1000px) {
  main {
    width: 100%;
    float: none; /* Eliminamos float para que ocupe todo el ancho */
  }
  aside {
    width: 100%;
    float: none; /* Eliminamos float para que ocupe todo el ancho */
  }
  footer div {
    width: 50%;
    float: left;
    margin-right: 0;
  }
}
@media (max-width: 600px) {
  nav ul {
    display: block;
  }
  nav li {
    display: block;
    margin-right: 0;
  }
  nav a {
    display: block;
    margin-bottom: 10px;
  }
  main, section, aside, footer div{
    width: 100%;
    float: none;
  }
}

3. Otras propiedades o condiciones

Aunque nosotros solamente vamos a trabajar con el ancho en las Media Queries, es interesante saber que, además del ancho, hay muchas otras propiedades que se pueden utilizar para aplicar o no estilos. Las siguientes son algunas de ellas:

Nombre	Descripción
width	Anchura del viewport
height	Altura del viewport
aspect-ratio	Relación de aspecto anchura-altura del viewport
orientation	Orientación del viewport
resolution	Densidad de píxeles del dispositivo
scan	Proceso de escaneo del dispositivo
grid	Si el dispositivo es grid o bitmap
update-frequency	Velocidad de actualización del dispositivo para modificar la apariencia del contenido
overflow-block	Cómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloque
overflow-inline	Cómo maneja el dispositivo el contenido que excede los límites del eje inline
color	Componente de número de bits por color del dispositivo, o cero si el dispositivo no es a color
color-index	Número de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla
monochrome	Bits por píxel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático
hover	Si se puede posicionar el puntero sobre los elementos

4. Operadores lógicos en media queries

Como hemos visto, las media queries nos permiten utilizar operadores lógicos para comprobar si se cumple una condición.

Operador AND

El siguiente código aplicará estilos cuando la pantalla tenga un ancho mínimo de 700px y la orientación de la misma sea horizontal (landscape).

@media (min-width: 700px) and (orientation: landscape) { ... }

Operador NOT

El siguiente código aplicará estilos cuando no se cumpla la condición especificada, es decir a cualquier elemento que no sea una pantalla convencional ni sea monocromo.

@media not screen and not (monochrome) { ... }