Tutorial CSS: Diseño responsive con media queries

¿Qué significa diseño responsive?

El diseño responsive es una técnica de desarrollo web que busca que una interfaz o layout sea capaz de adaptarse de manera óptima a cualquier tamaño de pantalla y dispositivo. La premisa clave detrás del diseño responsive es que los usuarios deben poder acceder y navegar de manera efectiva en una página web independientemente de si están utilizando un móvil, una tablet, un ordenador portátil o de escritorio.

Para lograr un diseño responsive, se utilizan múltiples técnicas y herramientas que permiten que el contenido, las imágenes y los elementos de la interfaz cambien de tamaño, se redistribuyan o incluso se oculten en función de las características del dispositivo del usuario. El objetivo final es proporcionar una experiencia de usuario coherente y funcional en cualquier entorno.

El concepto de diseño responsive incluye varias prácticas específicas como el uso de un grid flexible, imágenes fluidas y media queries. Estas prácticas permiten una adaptación efectiva a diferentes resoluciones y orientaciones de pantalla.

Ejemplo de diseño responsive utilizando flexbox y media queries:

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.item {
  flex: 1 1 100px;
  margin: 10px;
  padding: 20px;
  box-sizing: border-box;
}

/* Media Queries */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

En este ejemplo, .container utiliza flexbox para distribuir los elementos .item de forma flexible. La media query define que cuando el ancho de pantalla es menor o igual a 600px, la dirección de los elementos en el contenedor cambiará de fila a columna, adaptando así el layout para dispositivos móviles.

El diseño responsive también suele involucrar el uso de unidades relativas como porcentajes (%), em, rem y vw/vh para garantizar que los elementos escalen de manera proporcional a los cambios de tamaño de pantalla.

Otro concepto núcleo en el diseño responsive son las breakpoints. Estas son condiciones que determinan cuándo se deben aplicar ciertos estilos específicos basados en el tamaño de la pantalla del dispositivo. Las breakpoints sirven para transformar de manera dinámica el layout y optimizar la usabilidad y estética del sitio web.

Ejemplo de breakpoints:

/* Estilo para dispositivos pequeños */
@media (min-width: 320px) {
  .header {
    font-size: 2em;
  }
}

/* Estilo para dispositivos medianos */
@media (min-width: 768px) {
  .header {
    font-size: 3em;
  }
}

/* Estilo para dispositivos grandes */
@media (min-width: 1200px) {
  .header {
    font-size: 4em;
  }
}

En este ejemplo, .header cambia su tamaño de fuente conforme a tres rangos de anchura de pantalla diferentes, mejorando la legibilidad y estética en cada rango de dispositivo.

El diseño responsive no solo trata de ajustes de layout y estilo, sino también involucra consideraciones de rendimiento como la carga diferida de imágenes o la carga de scripts optimizados para dispositivos móviles. Adecuar tanto el contenido visual como el código de la página web conforme al dispositivo es esencial para ofrecer una experiencia de usuario superior.

¿Qué son y para qué se utilizan las media queries?

Las media queries en CSS son reglas condicionales que permiten aplicar estilos específicos a una página web en función de las características del dispositivo que la está visualizando. Estas características pueden incluir el ancho y alto de la ventana del navegador, la resolución de la pantalla, la orientación (vertical u horizontal), entre otras. Las media queries son esenciales para el diseño responsive porque permiten ajustar el layout y los estilos de una página web, asegurando que se vea y funcione bien en una amplia variedad de dispositivos.

Las media queries se utilizan principalmente para cambiar el diseño de una página web en función del tamaño de la pantalla del dispositivo. Esto se logra especificando condiciones (o breakpoints) dentro de las media queries que determinan cuándo deben aplicarse ciertos estilos. Por ejemplo, puedes tener una media query que solo aplique estilos específicos si el ancho de la pantalla es menor a 600px, para optimizar la visualización en dispositivos móviles.

Ejemplo básico de una media query:

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

En este ejemplo, la media query @media (max-width: 600px) se activa cuando la pantalla tiene un ancho de 600px o menos, cambiando la dirección de los elementos en el contenedor .container de fila a columna.

Las media queries no se limitan solo a dimensiones de pantalla; también puedes utilizar características como la orientación y la resolución de pantalla. Aquí algunos ejemplos más avanzados:

• Cambio de estilos según orientación (landscape y portrait):

@media (orientation: landscape) {
  .header {
    height: 50px;
  }
}

@media (orientation: portrait) {
  .header {
    height: 100px;
  }
}

• Cambio de estilos según la resolución de pantalla:

@media (min-resolution: 2dppx) {
  .image {
    background-image: url('high-res-image.png');
  }
}

Aquí, la media query @media (min-resolution: 2dppx) aplica un fondo de imagen de alta resolución para dispositivos que tienen una densidad de píxeles de al menos 2 píxeles por unidad de referencia.

• Uso combinado de varias condiciones:

Las media queries también permiten combinar múltiples condiciones utilizando operadores lógicos como and, not, y only. Esto permite un control más granular sobre cuándo se aplican ciertos estilos.

@media (min-width: 600px) and (max-width: 900px) {
  .sidebar {
    display: none;
  }
}

En este ejemplo, la media query solo se activa para pantallas que tengan una anchura entre 600px y 900px, ocultando el contenedor .sidebar en ese rango específico.

Las media queries son muy eficaces porque permiten crear aplicaciones web optimizadas y accesibles para cualquier tipo de dispositivo sin necesidad de múltiples versiones de la misma página web. Esto no solo mejora la experiencia del usuario, sino que también es beneficioso en términos de mantenimiento y desempeño del sitio web.

Sintaxis básica de media queries

Una media query en CSS comienza con la palabra clave @media seguida de una o más condiciones que determinan cuándo se deben aplicar los estilos especificados. La estructura básica de una media query es la siguiente:

@media <condiciones> {
  /* Estilos CSS */
}

Las condiciones dentro de las media queries pueden incluir varias características, como ancho de la pantalla, altura de la pantalla, orientación, resolución, entre otras. A continuación, se describen algunas de las condiciones más comunes:

• Ancho y altura de la pantalla:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

En este ejemplo, la media query aplica los estilos dentro del bloque { ... } cuando el ancho de la pantalla es de 768px o menos.

• Resolución de la pantalla:

@media (min-resolution: 300dpi) {
  .image {
    background-image: url('high-res-image.png');
  }
}

Aquí, los estilos se aplican en pantallas con una resolución mínima de 300 dpi.

• Orientación de la pantalla:

@media (orientation: landscape) {
  .header {
    height: 50px;
  }
}

Esta media query se activa cuando la pantalla está en modo paisaje.

Se pueden combinar varias condiciones usando operadores lógicos como and, not, y only:

@media (min-width: 320px) and (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

En este ejemplo, los estilos se aplican solo si el ancho de la pantalla está entre 320px y 768px, ocultando el elemento .sidebar.

Es posible utilizar varias media queries para aplicar estilos diferentes en función de diferentes características de la pantalla:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media (min-width: 1025px) {
  .container {
    flex-direction: row;
    justify-content: space-around;
  }
}

En este caso, tres media queries distintas aplican diferentes disposiciones para el elemento .container en función del ancho de la pantalla. La primera se activa en pantallas de 768px o menos, la segunda entre 769px y 1024px y la tercera en pantallas de 1025px o más.

También se pueden incluir media queries directamente en las hojas de estilo en línea de HTML utilizando el atributo media en la etiqueta <link>:

<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 601px)">

Estas líneas indican que mobile.css se aplica para pantallas con un ancho máximo de 600px y desktop.css para pantallas con un ancho mínimo de 601px.

Finalmente, las media queries pueden utilizarse en combinación con las reglas de importación @import:

@import url('mobile.css') screen and (max-width: 600px);
@import url('desktop.css') screen and (min-width: 601px);

Con esta sintaxis, los estilos de mobile.css y desktop.css se importan condicionalmente en función del ancho de la pantalla, proporcionando control sobre qué estilos se cargan en función de las características del dispositivo.

Uso de media queries para diseño responsive

Para implementar un diseño responsive de manera efectiva, es crucial entender cómo utilizar media queries para adaptar el layout y los estilos a diferentes tamaños y características de pantalla. A continuación, se describen diversas situaciones y se muestra cómo aplicar media queries en cada caso.

Adaptación básica del layout

Un caso común es cambiar el diseño de una página entre dos columnas y una sola columna según el tamaño de la pantalla. Imagina que tienes una página con un sidebar y un contenido principal. Para pantallas más pequeñas, quieres que ambos elementos se dispongan uno debajo del otro en lugar de lado a lado.

/* Layout base para pantallas grandes */
.container {
  display: flex;
  flex-direction: row;
}

.sidebar,
.content {
  flex: 1;
  padding: 10px;
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Aquí, el contenedor .container muestra sus elementos hijos en una fila para pantallas anchas, pero en columna para pantallas de un ancho máximo de 768px.

Imágenes y contenido multimedia

Otro uso común de las media queries es ajustar el tamaño y la resolución de las imágenes dependiendo del dispositivo. Usar imágenes adaptativas mejora tanto la experiencia del usuario como el rendimiento del sitio web.

/* Imagen por defecto para pantallas de alta resolución */
.image {
  background-image: url('high-res-image.png');
}

/* Imagen de menor resolución para pantallas pequeñas */
@media (max-width: 768px) {
  .image {
    background-image: url('low-res-image.png');
  }
}

En este ejemplo, la imagen de fondo cambia dependiendo del ancho de la pantalla, cargando una versión de menor resolución para dispositivos más pequeños.

Tipografía adaptable

La tipografía también debe ajustarse según el dispositivo, para asegurar la legibilidad y mantener una experiencia de usuario consistente.

/* Estilo base de la tipografía */
body {
  font-size: 16px;
}

/* Ajustes para pantallas medianas */
@media (max-width: 1024px) {
  body {
    font-size: 14px;
  }
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  body {
    font-size: 12px;
  }
}

En este caso, el tamaño de la fuente del body se reduce progresivamente para pantallas más pequeñas, mejorando la experiencia de lectura sin necesidad de hacer zoom.

Transformaciones de navegación

En pantallas grandes, solemos mostrar navegaciones completas y detalladas. Para dispositivos más pequeños, puede ser interesante convertir esa navegación en un menú hamburguesa.

/* Navegación completa para pantallas grandes */
.navbar {
  display: flex;
  justify-content: space-between;
}

/* Adaptación a menú hamburguesa para pantallas pequeñas */
@media (max-width: 768px) {
  .navbar {
    display: none;
  }
  
  .menu-toggle {
    display: block;
  }
}

Aquí, .navbar se oculta en pantallas pequeñas y se muestra un botón .menu-toggle que puede activarse para mostrar el menú en forma de lista desplegable.

Ajuste de grids y layouts complejos

Para layouts más complicados como aquellos basados en un sistema de grid, puede que se requieran ajustes más sofisticados:

/* Grid para pantallas grandes */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Ajuste a 2 columnas para pantallas medianas */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Ajuste a una única columna para pantallas pequeñas */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Este ejemplo muestra cómo un layout de grid puede ajustarse de cuatro columnas a dos y finalmente a una sola, dependiendo del tamaño de la pantalla.

Implementar media queries adecuadamente garantiza que el diseño de tu web sea flexible y esté optimizado para cualquier dispositivo, ofreciendo una experiencia de usuario superior.

Combinaciones de media queries

Para abordar diseños web más complejos y específicos, es posible combinar media queries utilizando operadores lógicos como and, or, not, y only. Estas combinaciones permiten aplicar estilos CSS bajo múltiples condiciones, brindando un control más preciso y adaptable del layout y estilo según las características del dispositivo.

Uso de múltiples condiciones con and:

/* Estilos aplicables solo si todas las condiciones se cumplen */
@media (min-width: 600px) and (max-width: 1200px) and (orientation: landscape) {
  .container {
    background-color: lightblue;
  }
}

En este ejemplo, las reglas CSS dentro del bloque se aplicarán únicamente si el ancho de la pantalla está entre 600px y 1200px, y la orientación es landscape. Utilizar el operador and ayuda a refinar las condiciones en las cuales los estilos deben ser aplicados.

Condiciones opuestas con not:

/* Estilos que no se aplican en dispositivos con ciertas características */
@media not all and (max-width: 600px) {
  .container {
    margin: 20px;
  }
}

Aquí, los estilos serán aplicados a todos los dispositivos excepto a aquellos con un ancho de pantalla de 600px o menos. El operador not excluye dispositivos específicos, lo cual es útil para aplicar estilos genéricos a todos los demás.

Uso específico de only:

/* Estilos específicamente para pantallas */
@media only screen and (min-resolution: 192dpi) {
  .high-res-image {
    background-image: url('high-dpi-image.png');
  }
}

La palabra clave only asegura que los estilos sean aplicados únicamente si el dispositivo interpreta correctamente la media query, evitando que navegadores antiguos intenten aplicar estilos incorrectamente.

Uso de múltiples media queries con coma (,):

Las media queries separadas por coma actúan como una condición de or, lo que significa que si cualquiera de las condiciones se cumple, los estilos serán aplicados.

@media (max-width: 600px), (orientation: portrait) {
  .sidebar {
    display: none;
  }
}

En este ejemplo, el contenedor .sidebar será ocultado si la pantalla tiene un ancho de 600px o menos, o si la orientación es portrait.

Combinar condiciones con diferentes características:

Combinar condiciones diversas como el tamaño de la pantalla y la dirección del desplazamiento (scroll) es posible para una mayor personalización de estilos.

@media (min-width: 768px) and (max-height: 1024px) and (hover: hover) {
  .nav-menu {
    display: flex;
  }
}

Aquí, la nav-menu será mostrada como un flex en dispositivos con un ancho mínimo de 768px, una altura máxima de 1024px y que soportan interacción mediante el hover.

Agrupación de media queries utilizando @supports:

El uso de @supports permite aplicar solo aquellos estilos que son compatibles con características específicas del navegador.

@supports (display: grid) {
  @media (min-width: 600px) {
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

En este ejemplo, los estilos dentro de la media query solo serán aplicados si el navegador soporta CSS Grid y el ancho de la pantalla es de al menos 600px.

Combinando estas técnicas, los desarrolladores pueden crear layouts altamente adaptativos y personalizados, proporcionando una experiencia de usuario óptima en una amplia gama de dispositivos y condiciones.

Nuevas características de media queries en la actualidad

Con el avance de las tecnologías web, las media queries han evolucionado para incluir nuevas características que facilitan la creación de diseños responsive más adaptativos y precisos. A continuación, se destacan algunas de las características más recientes en media queries de CSS:

Media queries de nivel 4

La especificación de nivel 4 trae varias mejoras y nuevas características que permiten una adaptación más refinada y potente a diferentes dispositivos.

• Características de interacción: Estas permiten adaptar el diseño basándose en las capacidades de interacción disponibles en el dispositivo.

@media (pointer: coarse) {
  .button {
    padding: 14px;
  }
}

@media (pointer: fine) {
  .button {
    padding: 10px;
  }
}

En estos ejemplos, se ajusta el tamaño de los botones dependiendo de si el dispositivo tiene un puntero grueso (como un dedo en pantallas táctiles) o fino (como un puntero del ratón).

• Características de luz: Permiten adaptar el diseño según la preferencia de luz del usuario, útil para implementar modos oscuros y claros de manera más coherente.

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #000000;
  }
}

Estos ejemplos aplican diferentes estilos según si el usuario prefiere un esquema de colores oscuro o claro.

• Características de reducción de movimiento: Esto es especialmente útil para mejorar la accesibilidad, permitiendo reducir o eliminar animaciones para usuarios que sufren de mareos o molestias con el movimiento excesivo.

@media (prefers-reduced-motion: reduce) {
  .slide {
    animation: none;
  }
}

Media queries de contenedor (CSS container queries)

Una de las innovaciones más significativas es la introducción de las CSS container queries, que permiten aplicar estilos en función de las dimensiones o características de un contenedor en lugar de la ventana gráfica.

• Uso básico de container queries:

.container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 300px) {
  .component {
    background-color: lightcoral;
  }
}

@container card (min-width: 600px) {
  .component {
    background-color: lightseagreen;
  }
}

En este ejemplo, los estilos de .component cambian dependiendo del tamaño del contenedor .container en lugar del tamaño de la ventana. Esto permite crear componentes realmente adaptativos.

• Combinar con media queries:

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

@container (min-width: 500px) {
  .inner {
    flex-direction: row;
  }
}

Este ejemplo muestra cómo se puede utilizar media queries y container queries en combinación para adaptarse tanto al tamaño de la ventana como al tamaño del contenedor.

Nuevas funciones de comparación

CSS introduce nuevas funciones que permiten una comparación más precisa en media queries.

• clamp():

body {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

En este ejemplo, el tamaño de la fuente se ajusta entre 1rem y 2rem en función de la ventana gráfica. Esta función reemplaza el uso de múltiples media queries para ajustar tamaños fluidos.

Media queries exclusivas para web components

Las nuevas media queries también facilitan la aplicación de estilos específicos para web components, permitiendo una mayor personalización y encapsulación.

• Shadow DOM contexual:

:host-context([theme="dark"]) {
  color: white;
}

@media (min-width: 700px) {
  :host {
    display: flex;
  }
}

Aquí, los estilos se aplican dentro del Shadow DOM basándose tanto en la media query como en el contexto (atributo theme).

Estas nuevas características permiten diseños más sofisticados y adaptativos, proporcionando a los desarrolladores herramientas más avanzadas para crear experiencias de usuario optimizadas en una amplia variedad de dispositivos y contextos.