El diseño web adaptable ya no es opcional
La mayor parte de las visitas a un sitio web llegan hoy desde teléfonos, pero esos mismos usuarios también consultan páginas desde tabletas, portátiles, monitores ultrapanorámicos e incluso televisores. Diseñar una interfaz que funcione bien en todos esos tamaños ya no es un extra, sino un requisito básico de cualquier proyecto web profesional.
El diseño web adaptable, conocido en inglés como responsive web design, consiste en construir una sola página cuyo contenido es idéntico para todos, pero cuya disposición se reorganiza según el espacio disponible. Una tarjeta que ocupa un tercio de la pantalla en un escritorio puede ocupar todo el ancho en un móvil; un menú horizontal puede convertirse en un panel desplegable; una imagen grande puede sustituirse por un recorte más adecuado para pantallas estrechas.
Esta guía recorre las técnicas necesarias para conseguirlo con HTML y CSS modernos: la etiqueta viewport, el enfoque mobile first, las media queries con su sintaxis de rangos, la tipografía fluida con clamp(), las imágenes responsivas con srcset y <picture>, Flexbox, CSS Grid, las container queries, las unidades de viewport dinámicas, la accesibilidad, el rendimiento y las pruebas. Todas las características mencionadas funcionan en las versiones actuales de los navegadores principales.
De los sitios para móviles al diseño adaptable
La web nació pensada para pantallas de escritorio. Durante años, las páginas se diseñaban con anchos fijos de unos pocos cientos de píxeles más que el monitor promedio, y cualquiera que las abriera desde un teléfono debía hacer zoom y desplazarse lateralmente para leer.
Cuando la navegación móvil despegó, la primera respuesta fue mantener dos sitios separados, uno de escritorio y otro en un subdominio dedicado para móviles. Esa estrategia duplicaba el trabajo, generaba contenidos desincronizados y complicaba el posicionamiento en buscadores, porque el mismo artículo existía en dos direcciones distintas.
La alternativa que terminó imponiéndose fue una sola base de código capaz de adaptarse. Las media queries de CSS permitieron aplicar estilos según el ancho de pantalla, y poco después se popularizó el enfoque mobile first, que diseña primero para la pantalla más pequeña y añade complejidad a medida que hay más espacio. Con la llegada de Flexbox, CSS Grid y, más recientemente, las container queries, construir interfaces adaptables es mucho más sencillo que en sus inicios.
La etiqueta viewport: el primer paso imprescindible
Antes de escribir una sola regla de CSS adaptable hay que indicar al navegador móvil cómo debe interpretar el ancho de la página. Sin instrucciones, muchos navegadores móviles simulan una pantalla de escritorio de unos 980 píxeles y reducen el resultado, de modo que el texto se vuelve diminuto y las media queries no se activan como se espera.
La etiqueta meta viewport resuelve el problema y debe estar en el <head> de todas las páginas:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Estudio Brisa | Diseño de interiores</title>
<link rel="stylesheet" href="css/estilos.css" />
</head>
<body>
<!-- contenido -->
</body>
</html>
El valor width=device-width hace que el ancho de la página coincida con el ancho del dispositivo, y initial-scale=1 fija el nivel de zoom inicial. Conviene evitar opciones como user-scalable=no o maximum-scale=1, que impiden a las personas con baja visión ampliar el contenido y representan una barrera de accesibilidad.
Estructura base del proyecto
Para los ejemplos se utilizará la página de un estudio ficticio de diseño de interiores. La estructura de archivos es sencilla:
estudio-brisa/
├── index.html
├── css/
│ ├── reset.css
│ └── estilos.css
└── img/
├── salon-800.jpg
├── salon-1600.jpg
├── salon-2400.jpg
├── salon-vertical.jpg
└── salon.avif
Un pequeño reinicio de estilos evita sorpresas al calcular tamaños. La regla más importante es box-sizing: border-box, que hace que el relleno y el borde se incluyan dentro del ancho declarado de cada elemento:
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.6;
}
img,
picture,
video {
display: block;
max-width: 100%;
height: auto;
}
La última regla ya es en sí una técnica adaptable: ninguna imagen ni video podrá desbordar su contenedor, y su altura se ajustará de forma proporcional.
Enfoque mobile first
Existen dos maneras de organizar el CSS adaptable. La primera parte del diseño de escritorio y lo va recortando para pantallas pequeñas con consultas de ancho máximo. La segunda, el enfoque mobile first, escribe primero los estilos para móviles y añade consultas de ancho mínimo a medida que aparece más espacio.
El segundo método se ha convertido en la práctica recomendada por varias razones. Los dispositivos móviles, que suelen tener menos potencia y peor conexión, reciben el CSS más simple. Obliga a priorizar el contenido, porque en una pantalla estrecha no cabe todo. Y el código resultante es más fácil de mantener, ya que cada consulta añade mejoras en lugar de deshacer decisiones previas.
/* Estilos base: una columna, pensados para móviles */
.servicios {
display: grid;
gap: 1rem;
padding: 1rem;
}
/* A partir de tabletas: dos columnas */
@media (width >= 40rem) {
.servicios {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
/* A partir de escritorio: tres columnas */
@media (width >= 64rem) {
.servicios {
grid-template-columns: repeat(3, 1fr);
padding: 2rem;
}
}
Leído de arriba abajo, el archivo cuenta una historia progresiva: así se ve en el móvil, así cambia al haber más espacio y así termina en pantallas grandes.
Media queries y su sintaxis moderna de rangos
Las media queries aplican estilos solo cuando se cumplen ciertas condiciones del dispositivo. Durante años se escribieron con los prefijos min- y max-, que resultaban poco intuitivos y propensos a errores de un píxel en los límites. La sintaxis de rangos, disponible en todos los navegadores modernos, permite usar operadores de comparación:
/* Sintaxis clásica */
@media (min-width: 40rem) and (max-width: 63.99rem) {
.barra-lateral {
display: none;
}
}
/* Sintaxis de rangos equivalente */
@media (40rem <= width < 64rem) {
.barra-lateral {
display: none;
}
}
La versión con rangos expresa con claridad que el estilo aplica desde 40rem incluido hasta 64rem excluido, sin restar decimales para evitar solapamientos.
Además del ancho, las media queries pueden consultar otras características útiles. La orientación distingue entre vertical y horizontal; hover y pointer permiten saber si el dispositivo tiene un puntero preciso, como un ratón, o depende del tacto:
/* Botones más grandes en pantallas táctiles */
@media (pointer: coarse) {
.boton {
min-height: 44px;
padding-inline: 1.25rem;
}
}
/* Efectos al pasar el cursor solo donde existe cursor */
@media (hover: hover) {
.tarjeta:hover {
transform: translateY(-4px);
}
}
Usar hover: hover evita un problema clásico en móviles, donde un efecto pensado para el ratón queda activado tras tocar un elemento.
Elegir puntos de corte según el contenido
Una tentación habitual es definir los puntos de corte a partir de dispositivos concretos: el ancho de un modelo de teléfono, el de una tableta concreta. Esa estrategia envejece mal, porque cada año aparecen tamaños nuevos y la variedad es enorme.
Es más robusto dejar que el contenido decida. El procedimiento consiste en abrir la página en el modo adaptable del navegador, estrechar y ensanchar la ventana poco a poco, y añadir un punto de corte justo donde el diseño empieza a verse mal: líneas de texto demasiado largas, tarjetas apretadas o menús que se desbordan.
Como orientación, muchos proyectos terminan con tres o cuatro puntos de corte:
| Rango aproximado | Contexto típico | Ajustes habituales |
|---|---|---|
| Menos de 40rem | Teléfonos | Una columna, menú desplegable |
| 40rem a 64rem | Tabletas y teléfonos en horizontal | Dos columnas, más espacio |
| 64rem a 90rem | Portátiles y escritorios | Tres columnas, menú horizontal |
| Más de 90rem | Monitores grandes | Ancho máximo del contenido |
Expresar los puntos de corte en rem en lugar de píxeles tiene una ventaja: si el usuario aumenta el tamaño de fuente base del navegador, el diseño cambia de disposición antes, manteniendo la legibilidad.
Unidades relativas y tipografía fluida con clamp()
Los píxeles fijos son la enemiga silenciosa de la adaptabilidad. Las unidades relativas ajustan los tamaños al contexto: rem se basa en el tamaño de fuente raíz, em en el del elemento padre, % en el contenedor, y vw y vh en las dimensiones del viewport. Para la tipografía y los espaciados, rem es la opción más predecible.
Durante años, adaptar el tamaño de los títulos exigía redefinirlos en cada media query. La función clamp() permite una tipografía fluida con clamp que crece de forma continua entre un mínimo y un máximo:
:root {
--texto-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--titulo-xl: clamp(2rem, 1.25rem + 3vw, 3.75rem);
--titulo-l: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
--espacio-seccion: clamp(2rem, 1rem + 5vw, 6rem);
}
body {
font-size: var(--texto-base);
}
h1 {
font-size: var(--titulo-xl);
line-height: 1.1;
}
h2 {
font-size: var(--titulo-l);
}
section {
padding-block: var(--espacio-seccion);
}
La función recibe tres valores: el mínimo, el valor preferido y el máximo. El valor preferido combina una parte fija en rem con otra proporcional al viewport, de modo que el título nunca baja de 2rem en móviles ni supera 3.75rem en pantallas grandes, pero crece suavemente entre ambos extremos. Incluir siempre una parte en rem es importante, porque un tamaño expresado solo en vw no responde cuando el usuario aumenta el zoom.
La longitud de las líneas también influye en la lectura. Una medida cómoda ronda entre 60 y 75 caracteres por línea, algo que puede limitarse con la unidad ch:
.articulo p {
max-inline-size: 68ch;
}
Imágenes que se adaptan: max-width, srcset y sizes
La regla max-width: 100% evita que una imagen desborde su contenedor, pero no resuelve otro problema: un teléfono descargaría la misma fotografía de 2400 píxeles que un monitor de alta resolución, desperdiciando datos y ralentizando la carga.
Las imágenes responsivas con srcset permiten ofrecer varias versiones del mismo archivo y dejar que el navegador elija la más adecuada según el tamaño en pantalla y la densidad de píxeles del dispositivo:
<img
src="img/salon-800.jpg"
srcset="
img/salon-800.jpg 800w,
img/salon-1600.jpg 1600w,
img/salon-2400.jpg 2400w
"
sizes="(width >= 64rem) 50vw, 100vw"
width="1600"
height="1067"
alt="Salón luminoso con sofá de lino y estanterías de roble"
loading="lazy"
decoding="async"
/>
El atributo srcset enumera los archivos con su ancho real, indicado con el sufijo w. El atributo sizes informa al navegador de cuánto espacio ocupará la imagen: la mitad del viewport en escritorio y todo el ancho en pantallas menores. Con esa información, el navegador calcula qué archivo descargar.
Los atributos width y height son esenciales aunque la imagen se escale con CSS. Permiten al navegador reservar el espacio con la proporción correcta antes de que llegue el archivo, evitando los saltos de contenido que penalizan la métrica Cumulative Layout Shift. El atributo loading="lazy" aplaza la descarga de imágenes fuera de pantalla, aunque no debe usarse en la imagen principal visible al cargar, porque retrasaría el elemento más importante de la página.
El elemento picture y la dirección de arte
A veces no basta con reducir la misma imagen. Una fotografía panorámica de un salón puede perder todo su sentido al encogerse en un móvil, donde convendría mostrar un recorte vertical centrado en el sofá. Esta técnica se llama dirección de arte y se implementa con el elemento <picture>:
<picture>
<source media="(width < 40rem)" srcset="img/salon-vertical.jpg" />
<source type="image/avif" srcset="img/salon.avif" />
<img
src="img/salon-1600.jpg"
width="1600"
height="1067"
alt="Salón luminoso con sofá de lino y estanterías de roble"
/>
</picture>
El navegador recorre los elementos <source> en orden y usa el primero cuyas condiciones cumple. En pantallas estrechas elige el recorte vertical; en el resto, si admite AVIF, descarga ese formato más ligero; y si nada coincide, recurre a la etiqueta <img> final, que además aporta el texto alternativo y las dimensiones.
Para fondos decorativos definidos en CSS, la función image-set() cumple un papel similar, permitiendo ofrecer versiones por formato o densidad sin recurrir a JavaScript.
Flexbox para componentes flexibles
Antes de Flexbox, los diseños de varias columnas se construían con tablas o elementos flotantes, técnicas frágiles que exigían trucos para limpiar flotados e igualar alturas. Flexbox simplificó enormemente la distribución de elementos en una dimensión, ya sea en fila o en columna.
Un patrón muy útil es dejar que los elementos se repartan el espacio y salten a la siguiente línea cuando no caben, sin escribir ninguna media query:
.caracteristicas {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.caracteristica {
flex: 1 1 16rem;
}
La declaración flex: 1 1 16rem indica que cada elemento parte de un ancho de 16rem, puede crecer para ocupar el espacio sobrante y encogerse si es necesario. En un móvil cabe uno por fila; en una tableta, dos; en un escritorio, tres o cuatro. La adaptación ocurre de forma intrínseca, según el espacio real disponible.
Flexbox también resuelve con elegancia la cabecera de un sitio, con el logotipo a un lado y la navegación al otro:
.cabecera {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem clamp(1rem, 4vw, 3rem);
}
CSS Grid para el diseño de página
Mientras Flexbox brilla en una dimensión, CSS Grid está pensado para controlar filas y columnas a la vez. Es la herramienta ideal para la estructura general de una página o para galerías y rejillas de tarjetas.
Una de sus combinaciones más potentes genera una rejilla adaptable sin media queries:
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 1.5rem;
}
La función repeat(auto-fit, ...) crea tantas columnas como quepan, y minmax() garantiza que cada una mida al menos 18rem y se reparta el espacio sobrante. El uso de min(100%, 18rem) evita que una columna desborde contenedores más estrechos que 18rem, un detalle que protege el diseño en pantallas muy pequeñas.
Para reorganizar la estructura completa según el espacio, las áreas con nombre resultan muy legibles:
.pagina {
display: grid;
grid-template-areas:
"cabecera"
"principal"
"lateral"
"pie";
gap: 1rem;
}
@media (width >= 64rem) {
.pagina {
grid-template-columns: 1fr 20rem;
grid-template-areas:
"cabecera cabecera"
"principal lateral"
"pie pie";
}
}
.cabecera {
grid-area: cabecera;
}
.principal {
grid-area: principal;
}
.lateral {
grid-area: lateral;
}
.pie {
grid-area: pie;
}
En móviles todo se apila en una columna; en escritorio, la barra lateral se coloca junto al contenido principal. Hay que tener presente que reordenar visualmente no cambia el orden del HTML, que es el que siguen los lectores de pantalla y la navegación con teclado, por lo que el documento debe mantener un orden lógico.
La característica subgrid, disponible en todos los navegadores modernos, permite además que los elementos anidados se alineen con las pistas de la rejilla padre, algo muy útil para que títulos, textos y botones de varias tarjetas queden a la misma altura.
Container queries: componentes que se adaptan a su contenedor
Las media queries responden al tamaño de la ventana, pero los componentes no siempre viven en el mismo contexto. Una tarjeta de producto puede aparecer en la columna principal, donde dispone de mucho espacio, y también en una barra lateral estrecha. Con media queries, ambas versiones se verían igual porque el viewport es el mismo.
Las consultas de contenedor CSS resuelven esta limitación: permiten que un componente adapte su diseño según el tamaño de su contenedor. Están disponibles en todos los navegadores principales desde 2023:
.zona-tarjeta {
container-type: inline-size;
container-name: tarjeta;
}
.tarjeta {
display: grid;
gap: 1rem;
}
@container tarjeta (width >= 30rem) {
.tarjeta {
grid-template-columns: 12rem 1fr;
align-items: center;
}
}
<div class="zona-tarjeta">
<article class="tarjeta">
<img
src="img/salon-800.jpg"
width="800"
height="533"
alt="Proyecto de salón nórdico"
/>
<div>
<h3>Salón nórdico</h3>
<p>Reforma integral con materiales naturales y luz cálida.</p>
</div>
</article>
</div>
Si el contenedor mide menos de 30rem, la imagen se apila sobre el texto; si es más ancho, se colocan lado a lado. El mismo componente funciona en cualquier columna sin conocer el layout de la página. Además, las unidades de contenedor como cqi permiten escalar tamaños según el ancho del contenedor:
.tarjeta h3 {
font-size: clamp(1.1rem, 0.9rem + 2cqi, 1.6rem);
}
Las container queries no sustituyen a las media queries; las complementan. Las media queries siguen siendo adecuadas para decisiones de página completa, como el diseño general o la navegación, mientras que las de contenedor encajan mejor en componentes reutilizables.
Unidades de viewport dinámicas en móviles
Un problema clásico en móviles es que 100vh no corresponde a la altura visible real. Las barras de dirección de los navegadores aparecen y desaparecen al hacer scroll, y una sección declarada con height: 100vh queda parcialmente oculta bajo ellas.
Las unidades de viewport modernas resuelven el problema distinguiendo tres medidas. svh corresponde a la altura con las barras del navegador visibles, la más pequeña; lvh, a la altura con las barras ocultas, la más grande; y dvh se ajusta dinámicamente según el estado actual:
.portada {
min-height: 100svh;
display: grid;
place-items: center;
padding: 2rem;
}
Para secciones de portada, svh suele ser la elección más segura, porque garantiza que todo el contenido sea visible desde el primer momento sin que la página salte al cambiar el tamaño de las barras. La unidad dvh es útil en interfaces tipo aplicación, aunque puede provocar recálculos de diseño durante el scroll.
Navegación adaptable
El menú es uno de los componentes que más cambia entre tamaños. En escritorio suele mostrarse como una lista horizontal; en móvil, como un panel que se abre con un botón. Una implementación accesible combina HTML semántico, un poco de CSS y una mínima dosis de JavaScript:
<header class="cabecera">
<a href="/" class="logo">Estudio Brisa</a>
<button
class="boton-menu"
aria-expanded="false"
aria-controls="menu-principal"
>
Menú
</button>
<nav aria-label="Principal">
<ul id="menu-principal" class="menu">
<li><a href="#proyectos">Proyectos</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
.menu {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
.menu.abierto {
display: grid;
gap: 0.5rem;
}
@media (width >= 48rem) {
.boton-menu {
display: none;
}
.menu {
display: flex;
gap: 2rem;
}
}
const boton = document.querySelector(".boton-menu");
const menu = document.getElementById("menu-principal");
boton.addEventListener("click", () => {
const abierto = boton.getAttribute("aria-expanded") === "true";
boton.setAttribute("aria-expanded", String(!abierto));
menu.classList.toggle("abierto", !abierto);
});
El atributo aria-expanded informa a los lectores de pantalla de si el menú está abierto, y usar un elemento <button> real garantiza que funcione con teclado sin trabajo adicional.
Accesibilidad y preferencias del usuario
Un diseño adaptable no responde solo al tamaño de la pantalla, sino también a las necesidades y preferencias de quien lo usa. Los sistemas operativos permiten declarar preferencias que CSS puede consultar.
La preferencia de movimiento reducido es importante para personas con trastornos vestibulares, que pueden sufrir mareos con animaciones amplias:
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
La preferencia de esquema de color permite ofrecer un tema oscuro de forma automática:
:root {
color-scheme: light dark;
--fondo: #fdfcf9;
--texto: #1f2328;
}
@media (prefers-color-scheme: dark) {
:root {
--fondo: #14161a;
--texto: #e7e9ec;
}
}
body {
background: var(--fondo);
color: var(--texto);
}
Otros aspectos de accesibilidad están ligados a la adaptabilidad. Los objetivos táctiles deben tener un tamaño suficiente para pulsarse con el dedo, el contenido debe seguir siendo usable al ampliar el zoom al 200 % y no deben aparecer barras de desplazamiento horizontal en pantallas estrechas, salvo en elementos como tablas de datos que lo requieran.
Rendimiento en dispositivos móviles
Los usuarios móviles suelen tener procesadores más modestos y conexiones menos estables, por lo que el rendimiento forma parte del diseño adaptable. Las imágenes son habitualmente el recurso más pesado, y usar srcset, formatos modernos como AVIF o WebP y carga diferida reduce drásticamente los datos transferidos.
La imagen principal visible al cargar merece un trato especial. En lugar de cargarla de forma diferida, conviene darle prioridad:
<img
src="img/salon-1600.jpg"
srcset="img/salon-800.jpg 800w, img/salon-1600.jpg 1600w"
sizes="100vw"
width="1600"
height="1067"
alt="Salón principal del proyecto destacado"
fetchpriority="high"
/>
Las fuentes web también afectan a la percepción de velocidad. Limitar el número de pesos tipográficos, usar el formato WOFF2 y declarar font-display: swap evita que el texto permanezca invisible mientras se descarga la fuente. Por último, conviene revisar las métricas Core Web Vitals, especialmente Largest Contentful Paint, Interaction to Next Paint y Cumulative Layout Shift, que reflejan la experiencia real de los usuarios.
Cómo probar un diseño adaptable
Las herramientas de desarrollo de los navegadores incluyen un modo de diseño adaptable que simula distintos tamaños y densidades de pantalla. Es el punto de partida ideal: permite estrechar la ventana poco a poco, detectar dónde se rompe el diseño y comprobar el comportamiento de las media queries y container queries.
La simulación, sin embargo, no reproduce todo. El comportamiento de las barras del navegador, la precisión del tacto, el rendimiento real y la legibilidad a distancia del brazo solo se aprecian en dispositivos físicos. Probar al menos en un teléfono Android y en un iPhone reales detecta problemas que el emulador no muestra.
Para el rendimiento, Lighthouse, integrado en Chrome, analiza la página con una simulación de dispositivo móvil y conexión limitada, y sugiere mejoras concretas:
npx lighthouse https://estudio-brisa.ejemplo --form-factor=mobile --only-categories=performance,accessibility --view
Una lista de comprobación mínima antes de publicar incluye verificar que no hay desplazamiento horizontal en pantallas de 320 píxeles, que el texto es legible sin zoom, que los botones se pulsan con facilidad, que las imágenes no se deforman y que el contenido sigue siendo usable con el zoom al 200 %.
Errores comunes y cómo evitarlos
El primer error es olvidar la etiqueta viewport. Sin ella, la página se mostrará reducida en los móviles y las media queries parecerán no funcionar. Es la primera comprobación ante cualquier comportamiento extraño en dispositivos reales.
El segundo es usar anchos fijos en píxeles para contenedores. Un width: 1200px provoca desplazamiento horizontal en cualquier pantalla menor. La alternativa es combinar un ancho fluido con un máximo: width: min(100% - 2rem, 75rem) centra el contenido con márgenes laterales y lo limita en pantallas grandes.
El tercero es ocultar contenido importante en móviles para simplificar. Si una información es relevante en escritorio, también lo es para quien navega desde el teléfono; lo correcto es reorganizarla, no eliminarla.
El cuarto es definir puntos de corte para dispositivos concretos en lugar de para el contenido, lo que deja huecos donde el diseño se rompe en tamaños intermedios.
El quinto es descuidar las imágenes: archivos enormes sin srcset, sin dimensiones declaradas o cargados de forma diferida cuando son la imagen principal. Cada uno de estos descuidos perjudica la velocidad o provoca saltos de contenido.
El sexto es probar solo en el emulador. Problemas como la altura del viewport en móviles, el tamaño real de los objetivos táctiles o el rendimiento en hardware modesto solo aparecen en dispositivos físicos.
Conclusiones
El diseño web adaptable es hoy la forma estándar de construir sitios, porque una sola base de código debe servir a pantallas que van desde un teléfono pequeño hasta un monitor ultrapanorámico. La etiqueta viewport es el punto de partida, y el enfoque mobile first ofrece una forma ordenada de escribir CSS que crece con el espacio disponible.
Las herramientas modernas han simplificado mucho el trabajo. La sintaxis de rangos hace más legibles las media queries, clamp() permite tipografías y espaciados fluidos sin multiplicar reglas, Flexbox y Grid generan disposiciones que se adaptan de forma intrínseca y las container queries llevan la adaptabilidad al nivel de cada componente. Las imágenes responsivas con srcset y <picture> completan el cuadro, ajustando tanto el tamaño como el encuadre.
Más allá de la técnica, un buen diseño adaptable respeta a las personas: tiene en cuenta sus preferencias de movimiento y color, permite ampliar el contenido, carga rápido en conexiones modestas y se prueba en dispositivos reales. Combinar estos principios da como resultado sitios que funcionan bien para cualquiera, en cualquier pantalla.