Diseño adaptable

El diseño adaptable permite que una página HTML se ajuste cuando cambia el espacio disponible. Un teléfono en posición vertical, una tableta girada horizontalmente y una ventana de escritorio cuyo tamaño se ha ajustado deben mostrar texto legible, controles utilizables e imágenes que quepan. Diseñas para una gama continua de anchos, incluidos los espacios entre los tamaños de dispositivos conocidos.

Ethan Marcotte introdujo el término en 2010 en torno a tres técnicas: disposiciones fluidas, imágenes flexibles y consultas de medios. Flexbox, las cuadrículas, las consultas de contenedor y el marcado de imágenes adaptables amplían ahora ese conjunto de herramientas. Cada uno resuelve una parte distinta del trabajo; una página necesita más que una sola configuración.

Cuenta los píxeles adecuados

Un píxel CSS es una unidad de maquetación, no necesariamente un punto de la pantalla. CSS define 96px como equivalentes a 1in; en una pantalla, esa relación no garantiza una pulgada física medida. Una pantalla de alta densidad usa varios píxeles del dispositivo por cada píxel CSS. La relación de píxeles del dispositivo describe esa proporción.

Un teléfono de 390 píxeles CSS de ancho con una relación de 3 tiene 1170 píxeles del dispositivo de ancho. Una consulta de ancho sigue viendo 390px. Los puntos adicionales ayudan a dibujar texto e imágenes nítidos; no dan a la disposición tres veces más espacio. Esta distinción importa cuando elijas archivos de imagen más adelante.

El área de visualización es la zona del navegador que se usa para mostrar la página, sin incluir sus propias barras de herramientas. Ajustar el tamaño de una ventana o girar un dispositivo cambia el espacio disponible. En los teléfonos, mostrar y ocultar las barras de herramientas también puede cambiar la altura visible.

Indica a los navegadores móviles el ancho previsto

Los navegadores móviles pueden maquetar una página sin configurar en un área de visualización virtual ancha, normalmente de unos 980 píxeles CSS, y después reducirla para ajustarla a la pantalla. En un teléfono de 390px, la escala es de aproximadamente 0,4. Un texto declarado a 16px parece entonces tener unos 6,4px de alto, y puede que una consulta para anchos estrechos nunca se cumpla porque el área de visualización usada para la disposición sigue siendo ancha.

Coloca esto dentro del <head> del documento:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width solicita el ancho del dispositivo en píxeles CSS. initial-scale=1 inicia la página con el zoom normal. Después de añadirlo, recarga la página en una vista de navegador del tamaño de un teléfono y comprueba tanto el texto como las consultas de ancho activas.

Mantén disponible el zoom. No añadas user-scalable=no ni maximum-scale=1. Los lectores con baja visión necesitan ampliar el contenido; el texto debe poder ampliarse al 200 % sin perder contenido ni funcionalidad. Algunos navegadores móviles ignoran las restricciones de zoom, pero la propia página debe permitirlo.

Comprueba también la disposición

La etiqueta del área de visualización no cambia una caja de ancho fijo. Una .page con width: 960px sigue sobrepasando un área de visualización de 390px. Sustituye los anchos rígidos por anchos fluidos con límites, haz flexible el contenido multimedia y añade cambios de disposición donde el contenido los necesite.

Para diagnosticar una página móvil diminuta, inspecciona primero el <head> en busca de la etiqueta del área de visualización. Para diagnosticar una página de tamaño normal que se desplaza horizontalmente, inspecciona las cajas que superan el ancho disponible. Estos síntomas apuntan a causas distintas.

Elige una unidad preguntándote a qué debe ajustarse el tamaño. Una columna suele ajustarse a su bloque contenedor. El relleno de un botón puede ajustarse al texto del botón. La longitud de línea de un párrafo depende de la fuente. Usar la referencia adecuada hace que los cambios funcionen conjuntamente.

Porcentajes y modelo de caja

Una caja con width: 50% mide 300px de ancho en un bloque contenedor de 600px y 180px en uno de 360px. El relleno y los márgenes porcentuales, incluidos los valores superior e inferior, también usan el ancho del bloque contenedor en la escritura horizontal normal. Por tanto, padding-top: 10% en un elemento padre de 600px de ancho equivale a 60px.

La altura es diferente. Una altura porcentual necesita una altura de referencia definida. Cuando la altura de un elemento padre normal depende de su contenido, height: 50% suele comportarse como auto. Deja que las cajas de texto crezcan con su contenido en lugar de controlarlas mediante alturas porcentuales.

Usa un contenedor fluido con un máximo:

.page {
  box-sizing: border-box;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

En una pantalla estrecha, la caja llena el ancho disponible, con el relleno en su interior. En una pantalla ancha se detiene en 70rem y los márgenes automáticos en el eje en línea la centran. Con una raíz de 16px, su ancho exterior máximo es 1120px. border-box incluye el relleno y los bordes en el ancho declarado; con content-box, el ancho del 100 % más el relleno se desbordaría. Un width: 70rem fijo también impediría que se redujera.

Por ejemplo, un contenedor border-box de 340px de ancho con 16px de relleno a cada lado dispone de 308px para su contenido cuando no hay borde. El ancho declarado describe el exterior de esta caja. Si cambias la misma declaración a content-box, solo el contenido mide 340px y el ancho exterior pasa a ser 372px. Inspeccionar estos anchos por separado en las herramientas de desarrollo facilita la detección del desbordamiento causado por el relleno.

Deja que se aplique la configuración del texto

Deja el tamaño de fuente de la raíz en el valor predeterminado del lector o usa un porcentaje como 100%. Con una raíz de 16px, 1.5rem equivale a 24px; con una raíz de 20px, equivale a 30px. Un valor fijo html { font-size: 16px; } impide que esa preferencia de fuente predeterminada se refleje en los tamaños relativos a la raíz.

Para font-size, em usa el tamaño de fuente del elemento padre. Por tanto, las listas anidadas configuradas cada una con 1.2em acumulan el cambio: 16px pasan a 19,2px y después a 23,04px. Usa rem cuando todos los niveles de anidamiento deban mantener el mismo tamaño.

En otras propiedades, em usa el tamaño de fuente del propio elemento. Un botón con padding: 0.5em 1em aumenta su relleno a medida que crece su texto. Esto mantiene el espaciado proporcional sin un punto de ruptura adicional.

Para los párrafos, max-width: 65ch proporciona un límite de lectura útil. La unidad mide el ancho del «0», por lo que no cuenta exactamente los caracteres en una fuente proporcional. Una recomendación habitual de lectura es usar aproximadamente entre 45 y 75 caracteres por línea; comprueba la fuente y el texto reales en el navegador.

Las unidades relativas al área de visualización siguen el área de visualización del navegador incluso cuando un elemento está dentro de una caja más pequeña. 1vw es el 1 % del ancho del área de visualización; 1vh es el 1 % de su altura. vmin usa la dimensión menor y vmax usa la mayor. En un área de visualización de 800px de ancho, 50vw equivale a 400px. En una de 300px de alto, 70vh equivale a 210px.

Esta referencia importa. Una barra lateral puede medir solo 260px de ancho en una ventana de 1400px. Un elemento hijo con width: 50vw solicita 700px, por lo que no cabrá en esa barra lateral. Usa un porcentaje cuando el hijo deba ajustarse a su padre. Para un bloque normal de ancho completo, prefiere width: 100%: 100vw puede incluir el ancho de una barra de desplazamiento de escritorio y provocar desplazamiento horizontal.

Elige a qué altura móvil te refieres

Las barras de herramientas de los navegadores móviles pueden reducir el área visible de la página. Las unidades de altura del área de visualización distinguen tres estados:

La unidad vh corresponde al área de visualización grande. También existen variantes de ancho como svw, lvw y dvw. Para una sección inicial alta, min-height: 100svh establece un mínimo estable y permite que crezca el contenido más largo. Una height fija deja que el contenido se desborde cuando aumenta su altura. Las unidades dinámicas pueden seguir los cambios de las barras de herramientas, pero las actualizaciones pueden producirse por pasos y mover la disposición.

Elige la referencia de altura según el comportamiento que necesites. Una sección inicial estable puede usar el área de visualización pequeña incluso después de que desaparezcan las barras; no tiene que volver a estirarse solo porque haya más espacio visible. Un panel diseñado para seguir ese espacio cambiante puede usar unidades dinámicas, aceptando el posible movimiento. En ambos casos, una altura mínima permite que el contenido adicional extienda la sección en el flujo normal.

Establece límites para un valor fluido

min() selecciona el valor menor y puede limitar un ancho: width: min(100%, 40rem) llena el elemento padre hasta alcanzar 40rem. max() selecciona el valor mayor y establece un mínimo. clamp() establece un mínimo, un valor preferido y un máximo, en ese orden.

.title {
  font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

Con una raíz de 16px, el mínimo es 16px, el tamaño preferido es 8px más el 2 % del ancho del área de visualización y el máximo es 32px. Examina los límites:

1. A 375px, el tamaño preferido es 15,5px, por lo que se aplica el mínimo de 16px.
2. A 1000px, el tamaño preferido es 28px, dentro de los límites.
3. A 1400px, el tamaño preferido es 36px, por lo que se aplica el máximo de 32px.

Las mismas funciones aceptan cálculos como min(100% - 2rem, 70rem). Mantén valores de longitud compatibles y espacios alrededor del operador de resta.

El texto dimensionado solo en vw puede resultar diminuto en pantallas estrechas y enorme en las anchas. El zoom de escritorio también estrecha el área de visualización en píxeles CSS, lo que puede anular la ampliación de ese texto. Incluye una parte relativa a la fuente y límites útiles, y después prueba la ampliación del texto: una expresión que combine rem y vw por sí sola no garantiza un aumento completo del 200 %.

Una consulta de medios aplica CSS cuando se cumple una condición sobre la salida, el área de visualización o las preferencias del lector. El navegador vuelve a comprobarla cuando cambian las condiciones pertinentes, por lo que ajustar el tamaño de una ventana puede cambiar los estilos sin recargar la página.

.heading { font-size: 1.25rem; }

@media (min-width: 40em) {
  .heading { font-size: 2rem; }
}

Con el valor predeterminado habitual del navegador de 16px, 40em equivale a 640px. El encabezado más grande se aplica desde ese ancho en adelante. En las consultas de medios, em y rem usan el tamaño de fuente inicial del navegador, no el tamaño establecido por el autor en <html>. Para un lector con un valor predeterminado de 20px, el mismo cambio se produce a 800px.

Interpreta las condiciones con precisión

min-width incluye su límite: 600px cumple min-width: 600px. max-width también incluye su límite. La sintaxis de intervalos hace explícita la comparación:

@media (width >= 600px) { /* wider layout */ }
@media (600px <= width < 900px) { /* middle band */ }

Si combinas max-width: 600px con min-width: 600px, ambas condiciones se cumplen a 600px. Usar 599px y 600px deja un hueco en anchos fraccionarios como 599,5px. Las consultas de ancho mínimo creciente evitan ese hueco; los intervalos complementarios como < 600px y >= 600px son otra opción.

Los tipos de medios identifican la salida: screen, print o el valor predeterminado all. @media print puede eliminar la navegación y usar texto oscuro sobre papel blanco. Las condiciones se combinan de formas útiles:

only no tiene ningún efecto útil en los navegadores actuales. El ancho y la altura describen el área de visualización; orientation: portrait significa que su altura es al menos igual a su ancho. Otras características comprueban la precisión de entrada, la capacidad de mantener el puntero sobre un elemento, la resolución, el movimiento reducido y el esquema de color. Un área de visualización horizontal no indica si el lector tiene un ratón.

Como condición práctica, @media (hover: hover) and (pointer: fine) requiere un dispositivo de entrada principal capaz de mantener el puntero sobre un elemento y apuntar con precisión. Una ventana estrecha controlada con ratón puede cumplirla, mientras que un dispositivo táctil ancho puede no hacerlo. Usa la consulta para efectos opcionales del puntero; mantén la acción correspondiente disponible mediante los controles normales de la página.

Ten en cuenta la cascada

Una consulta de medios no aumenta la especificidad de un selector. En una hoja de estilo normal con reglas de igual especificidad, prevalece la última declaración que se cumple. Si la regla base .heading aparece después de la regla anterior para pantallas anchas, también prevalece a anchos grandes. Coloca primero las reglas base y después las consultas que las modifican.

También puedes añadir una condición en HTML. <link rel="stylesheet" href="print.css" media="print"> aplica sus reglas al imprimir, pero el navegador aún puede descargar el archivo con menor prioridad. El atributo media de un elemento <source> usa condiciones para elegir un origen de imagen.

El CSS con enfoque primero móvil empieza con la disposición estrecha como reglas normales fuera de cualquier consulta. Después, las consultas de ancho mínimo añaden cambios cuando el espacio lo permite. Esto se ajusta al flujo normal del documento: los bloques ya se apilan verticalmente, por lo que la página base suele necesitar poco código de disposición.

El CSS con enfoque primero escritorio empieza con reglas para pantallas anchas y usa consultas de ancho máximo para modificarlas. Ambos enfoques pueden funcionar, pero el enfoque primero móvil suele hacer que la base y cada cambio posterior sean más fáciles de seguir.

Parte de una columna

.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40em) {
  .cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Con un valor predeterminado de 16px, los cambios se producen a 640px y 1024px. Un área de visualización de 500px muestra una columna. A 800px, la primera consulta se cumple y da dos columnas. A 1200px, ambas consultas se cumplen; la última regla da tres columnas.

La consulta para anchos mayores no desactiva la consulta anterior. Si inviertes su orden, la regla de 40em queda al final y reduce la disposición ancha a dos columnas. Mantén las consultas de ancho mínimo creciente en orden ascendente cuando cambien la misma propiedad con la misma especificidad.

Encuentra el punto de ruptura en el contenido

Un punto de ruptura es el punto en el que una consulta cambia la disposición. Empieza con el contenido real en una ventana estrecha y después ensánchala lentamente. Observa si la navegación se ajusta de forma incómoda, si los párrafos se alargan demasiado o si las tarjetas se estiran más allá de un ancho de lectura útil. Añade un cambio donde mejore ese contenido.

No elijas un punto de ruptura solo porque un dispositivo conocido tenga ese ancho. Las pantallas varían, las ventanas de escritorio pueden tener cualquier tamaño y una fuente más grande puede hacer que la misma navegación necesite más espacio. Los puntos de ruptura en unidades relativas pueden ayudar a que la disposición responda al tamaño de texto predeterminado del lector.

Después de cada cambio, prueba ambos lados del punto de ruptura y varios anchos entre los cambios. Una disposición que solo se ve bien a 375px, 768px y 1280px aún tiene muchas posibilidades de fallar. Los anchos fluidos, el ajuste en varias líneas y las columnas automáticas de cuadrícula se ocupan de buena parte de ese espacio intermedio.

Prueba conjuntamente la navegación y la lista de tarjetas después de añadir una barra lateral a la página. La ventana se ha ensanchado, pero la columna principal puede haberse estrechado porque ahora comparte ese espacio. Una disposición de tarjetas que funcionaba justo por debajo del punto de ruptura de la página puede fallar justo por encima. Este es un buen lugar para permitir que las tarjetas se ajusten en varias líneas o encajen en columnas automáticas mientras la página usa una consulta explícita.

Mantén útiles el contenido y las descargas

Quienes usan teléfonos también necesitan el contenido de la página. Si una explicación secundaria ocupa demasiado espacio, apílala más abajo o colócala en un control nativo <details> que los lectores puedan abrir. No elimines información necesaria solo para que una captura estrecha se vea ordenada.

Empezar con una pantalla estrecha también ayuda a elegir una página predeterminada ligera. Ocultar una imagen grande con CSS no impide necesariamente su descarga; usa marcado de imágenes adaptables para ofrecer archivos adecuados. Una página legible de una sola columna con una imagen más pequeña es un buen punto de partida; después, las disposiciones más anchas añaden espacio y lo reorganizan.

Una disposición puede adaptarse mediante una consulta explícita o mediante sus propias reglas de tamaño. Usa una consulta cuando la distribución deba cambiar en un punto elegido. Usa una disposición intrínseca cuando los elementos solo necesiten ajustarse al espacio disponible.

Deja que la cuadrícula determine las columnas

.tiles {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
}

Con una raíz de 16px, cada columna intenta medir al menos 240px. La cuadrícula coloca tantas como sea posible, resta los espacios y después reparte el ancho restante con 1fr. En un contenedor de 1000px, cuatro columnas de 240px más tres espacios de 16px necesitarían 1008px, por lo que solo caben tres. Cada una obtiene unos 322,7px. Un contenedor de 700px obtiene dos columnas de 342px; uno de 360px obtiene una.

El min(15rem, 100%) interior importa cuando el contenedor mide menos de 240px de ancho. Permite que el mínimo pase a ser el ancho disponible. Sin él, el mínimo de 240px provocaría desbordamiento. auto-fit contrae las pistas vacías y permite que unos pocos elementos se expandan; auto-fill conserva las pistas vacías y puede dejar esos elementos más estrechos.

Deja que los elementos flex se ajusten en varias líneas

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.links > * { flex: 1 1 15rem; }

Cada elemento parte de una base de 15rem, puede reducirse o crecer y pasa a otra línea cuando no caben más elementos en la fila. Cada línea reparte su propio espacio restante. Por tanto, dos elementos en la última línea pueden ser más anchos que los de arriba. Una cuadrícula es más adecuada cuando los anchos de las columnas deben alinearse entre filas. La navegación también puede ajustarse en varias líneas, o una consulta puede cambiar su flex-direction a column.

Cambia toda la página cuando sea necesario

Empieza la página en flujo normal. Después añade una disposición con barra lateral:

@media (min-width: 48em) {
  .page {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1rem;
  }
}

Con el valor predeterminado habitual de 16px, esto empieza a 768px. La primera columna es la barra lateral; la segunda ocupa el espacio restante. El mínimo de cero permite que la pista principal se reduzca; su contenido aún debe ajustarse o desplazarse de forma adecuada. Las áreas de cuadrícula con nombre pueden expresar una disposición más compleja.

Mantén el HTML en un orden de lectura lógico. La propiedad flex order y la colocación en la cuadrícula cambian dónde aparecen los elementos, pero el foco del teclado y los lectores de pantalla siguen el orden del código fuente. Prueba a recorrer los enlaces con el tabulador después de reorganizarlos.

Una tabla de datos ancha puede necesitar su estructura bidimensional. Colócala en un contenedor con desplazamiento local, overflow-x: auto, tabindex="0", role="region" y un nombre accesible como aria-label="Event schedule". Solo la región de la tabla debe desplazarse horizontalmente; el resto de la página debe seguir redistribuyéndose.

Una consulta del ancho del área de visualización da la misma respuesta para todos los componentes de una página. Esto puede ser inadecuado para una tarjeta reutilizable: la ventana puede medir 1400px de ancho mientras la barra lateral solo da 300px a la tarjeta. Una consulta de tamaño del contenedor mide el espacio disponible de un antecesor, de modo que la tarjeta puede adaptarse al espacio que ocupa realmente.

Declara un contenedor y después aplica estilos a su contenido

<div class="card-wrap">
  <article class="card">...</article>
</div>

.card-wrap { container-type: inline-size; }
.card { display: grid; gap: 1rem; }

@container (min-width: 25rem) {
  .card { grid-template-columns: 8rem minmax(0, 1fr); }
}

En la escritura horizontal, inline-size es el ancho. Declara que el contenedor puede responder a consultas sobre el tamaño en el eje en línea. Con un tamaño de fuente de raíz de 16px, 25rem equivale a 400px. Una tarjeta en un contenedor de 300px permanece apilada; otra en un contenedor de 500px coloca la imagen junto al texto. Ambas pueden estar en la misma página al mismo tiempo.

Una consulta mide un antecesor del elemento al que se aplican estilos. Si colocas container-type solo en .card y después intentas cambiar esa misma tarjeta, la consulta sigue buscando por encima de ella. Usa un contenedor como caja de medición y la tarjeta interior como caja a la que se aplican los estilos.

Selecciona el antecesor deseado

Una consulta de tamaño sin nombre usa el contenedor de tamaño antecesor adecuado más cercano. En una disposición anidada, puede ser un contenedor interior. Un nombre permite elegir un antecesor concreto:

.panel { container: sidebar / inline-size; }

@container sidebar (width >= 30rem) {
  .panel-title { font-size: 1.5rem; }
}

La propiedad abreviada establece tanto el nombre como el tipo. Si no hay un antecesor adecuado, la consulta no se cumple; los estilos base siguen aplicándose. Las condiciones pueden usar intervalos y operadores lógicos como and, or y not.

Asegúrate de que el contenedor obtenga su tamaño

La contención impide que la dimensión consultada dependa del mismo contenido cuyos estilos puede cambiar la consulta. Coloca container-type en una caja cuyo ancho proceda de la disposición del elemento padre, como un bloque, un área de cuadrícula o un elemento flex que crezca. Una caja que se reduce para ajustarse a su contenido puede contraerse cuando este deja de contribuir a su tamaño en el eje en línea.

container-type: size admite consultas tanto de ancho como de altura, pero también aplica contención al tamaño en el eje de bloque. Su altura necesita una configuración de tamaño independiente; de lo contrario, puede contraerse. Para tarjetas normales, inline-size permite que la altura siga dependiendo del contenido. El valor predeterminado normal no establece un contenedor para consultas de tamaño.

Las características de tamaño incluyen ancho, altura, tamaño en el eje en línea, tamaño en el eje de bloque, relación de aspecto y orientación, siempre que el tipo de contenedor elegido admita las dimensiones implicadas. Los navegadores principales actuales admiten consultas de tamaño. Mantén una disposición base apilada y utilizable para que la tarjeta siga funcionando si un navegador ignora la mejora.

Una página adaptable puede combinar tres enfoques: redistribución automática del contenido, condiciones del área de visualización y condiciones del componente. Decide qué información necesita la disposición antes de elegir una consulta.

Define tamaños dentro de un contenedor

Las unidades de consulta de contenedor describen porcentajes de un contenedor antecesor adecuado. cqw y cqh usan el ancho y la altura. cqi y cqb usan el tamaño en el eje en línea y en el eje de bloque. cqmin y cqmax usan la menor y la mayor de las dos dimensiones. En la escritura horizontal, el tamaño en el eje en línea es el ancho.

En un contenedor válido de 400px de ancho, 5cqi equivale a 20px. En uno de 600px de ancho equivale a 30px. Esto permite que un encabezado se ajuste a su propio componente, incluso cuando toda la página mantiene el mismo ancho.

Mantén límites para el texto:

.card-wrap { container-type: inline-size; }
.card h2 {
  font-size: clamp(1rem, 4cqi, 1.5rem);
}

Con una raíz de 16px, un contenedor de 300px da un valor preferido de 12px, por lo que se aplica el mínimo de 16px. A 600px, 4cqi equivale a 24px, igual al máximo. Los contenedores más anchos no pueden llevar el encabezado por encima de 24px. Prueba tanto la ampliación como el cambio de tamaño del contenedor; el texto fluido debe seguir siendo utilizable cuando los lectores usan el zoom.

Las unidades de contenedor eligen el antecesor válido más cercano para la dirección medida. Si no existe ninguno, recurren a las unidades del área de visualización pequeña. Por tanto, olvidar container-type puede hacer que el texto cambie con la ventana aunque parezca funcionar. Inspecciona los antecesores cuando parezca que un tamaño sigue un espacio incorrecto. Un nombre de contenedor en una consulta no hace por sí solo que todas las unidades de contenedor usen ese antecesor con nombre.

Combina las herramientas

Una página puede cambiar a columnas de barra lateral y contenido principal a 48em mediante una consulta de medios. Dentro del área principal, una cuadrícula automática puede colocar tantas tarjetas como permita el espacio. La consulta de contenedor de una tarjeta puede mover su imagen junto al texto solo cuando ese espacio concreto sea lo bastante ancho.

No sustituyas una consulta de movimiento reducido o de interacción al mantener el puntero sobre un elemento por una consulta de contenedor. Las dimensiones de una caja no revelan las preferencias ni el dispositivo de entrada del lector. Del mismo modo, copiar las reglas de una tarjeta en consultas del área de visualización distintas para cada espacio de la página vincula ese componente reutilizable a cada disposición que lo rodea. Deja que su espacio local determine cuándo cambia su disposición.

Una imagen puede ser más ancha que el espacio que le da la disposición. Empieza con una regla que le permita reducirse y conservar su forma:

img, video {
  max-width: 100%;
  height: auto;
}

max-width limita el ancho mostrado al del contenedor sin obligar a una imagen pequeña a llenarlo. width: 100% estiraría un logotipo pequeño hasta ocupar todo el ancho. La altura automática conserva la relación de aspecto cuando cambia el ancho.

Reserva el espacio antes de la descarga

Conserva los atributos de dimensiones en el HTML:

<img src="coast.jpg" width="1200" height="800"
     alt="A rocky coast with a walking path">

Esas dimensiones dan una relación de aspecto de 3:2, por lo que el navegador puede reservar espacio antes de que llegue el archivo. Cuando el CSS muestra la imagen con un ancho de 360px, la altura correspondiente es de 240px. Eliminar los atributos porque la imagen es adaptable hace que se pierda esa información inicial de tamaño. El CSS aún puede mostrar la imagen más pequeña que las dimensiones de los atributos.

Para un reproductor de vídeo insertado, asigna a la caja su propia relación:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

Esto mantiene la forma 16:9 del reproductor mientras cambia su ancho. Deja que las alturas del texto dependan del contenido; una relación de aspecto fija es útil para cajas multimedia de forma conocida.

Decide si se permite el recorte

Una miniatura de tarjeta suele tener que llenar una caja uniforme. Asígnale un ancho y una relación de aspecto y después elige cómo se ajusta la imagen de origen:

.thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}

cover llena la caja y recorta las partes que sobresalen. contain muestra la imagen completa y puede dejar franjas vacías. El valor predeterminado fill estira la imagen hasta llenar la caja, lo que puede distorsionarla. object-position elige la alineación usada al ajustar la imagen; en este ejemplo, la alineación superior mantiene visible la parte de arriba.

Para una comparación concreta, coloca una foto de 400 × 200 en una miniatura de 320 × 240. Cover la escala a 480 × 240 y después recorta un total de 160px del ancho escalado. Contain la escala a 320 × 160 y deja un total de 80px de altura sin usar. Ambos conservan las proporciones originales; la elección depende de si hay que llenar la caja o mantener visible toda la imagen.

Las imágenes con contenido deben ir en <img> con texto alternativo útil. Los fondos CSS son adecuados para la decoración; background-size: cover puede recortarlos para llenar su caja y las consultas de medios pueden cambiar el archivo de fondo.

Para las imágenes situadas por debajo de la pantalla inicial, loading="lazy" puede retrasar la descarga hasta que el lector se acerque a ellas. Deja que la imagen principal inicial se cargue de inmediato para que pueda aparecer pronto. Reducir con CSS una foto de 4000 píxeles sigue descargando esa foto; se necesita marcado de imágenes adaptables para elegir un archivo más pequeño.

Una foto puede tener varios archivos con el mismo contenido y las mismas proporciones, pero con distintas dimensiones en píxeles. La selección de resolución permite que el navegador elija un archivo según el tamaño mostrado, la densidad de pantalla y sus decisiones de carga. Así evita transferir datos innecesarios y conserva suficientes detalles.

Tamaño mostrado fijo: descriptores de densidad

<img src="logo-200.png"
     srcset="logo-200.png 1x, logo-400.png 2x"
     width="200" height="80" alt="Northwind Books">

El logotipo se muestra con un ancho de 200 píxeles CSS. El archivo de 200 píxeles es adecuado para una pantalla con relación 1; el archivo de 400 píxeles proporciona dos píxeles de origen por cada píxel CSS mostrado para una relación 2. Esta forma usa descriptores x y no necesita el atributo sizes.

Tamaño mostrado variable: descriptores de ancho

<img src="park-800.jpg"
     srcset="park-480.jpg 480w,
             park-800.jpg 800w,
             park-1600.jpg 1600w"
     sizes="(min-width: 64em) 50vw, 100vw"
     width="1600" height="1000"
     alt="Trees around a park pond">

Cada valor w debe indicar el ancho real del archivo en píxeles. No establece un ancho CSS. El CSS sigue controlando la caja, y sizes describe al navegador el ancho previsto para mostrarla.

Prevalece la primera condición de sizes que se cumple. Con un valor predeterminado del navegador de 16px, a partir de 1024px el espacio asignado mide 50vw; por debajo de ese ancho mide 100vw. La última longitud, sin condición, es la alternativa. Las longitudes pueden usar unidades relativas al área de visualización, píxeles o unidades de fuente, y cálculos como calc(100vw - 2rem), pero no porcentajes. Cuando falta sizes con descriptores de ancho, el navegador normalmente supone 100vw.

Calcula el detalle necesario

Multiplica el ancho mostrado descrito por la relación de píxeles del dispositivo. Para elegir el archivo más pequeño que sea suficiente, compara ese valor con los anchos de los archivos disponibles:

1. Un área de visualización de 1200px con relación 1 usa el espacio de 50vw: 600 píxeles CSS. El archivo de 800w es el primero suficientemente grande.
2. Un área de visualización de 390px con relación 3 usa 390 píxeles CSS. Necesita 1170 píxeles de origen, por lo que 1600w cumple el objetivo.
3. La misma área estrecha con relación 2 necesita 780 píxeles de origen, cantidad que cubre 800w.

Los navegadores reales pueden reutilizar un archivo más grande almacenado en caché o preferir uno más pequeño cuando las condiciones de carga son limitadas. El marcado proporciona opciones e información de tamaño, no una orden incondicional de descargar un archivo exacto.

Los navegadores empiezan a descargar imágenes antes de disponer de la disposición CSS completa. Por eso la indicación de tamaño debe estar en el HTML. Si el CSS da a una imagen la mitad del área de visualización, pero sizes indica 100vw, el navegador puede descargar un archivo demasiado grande. Actualiza sizes cuando cambie la disposición. Conserva src como alternativa y usa un único texto alt. Los recortes diferentes necesitan <picture>, porque las opciones normales de resolución deben ser versiones intercambiables de la misma imagen.

Reducir las dimensiones en píxeles de una foto conserva la misma composición. A veces un teléfono necesita una composición diferente: una foto panorámica de un escenario puede hacer que la persona que habla sea demasiado pequeña para reconocerla. La dirección de arte cambia el recorte o la imagen para que el sujeto importante siga siendo claro.

El elemento <picture> proporciona opciones de origen ordenadas, seguidas de un <img> obligatorio:

<picture>
  <source media="(min-width: 50em)"
          srcset="stage-wide.jpg" width="1600" height="900">
  <img src="stage-close.jpg" width="800" height="1000"
       alt="A speaker presenting on stage">
</picture>

Con un valor predeterminado de 16px, el recorte panorámico se selecciona a partir de 800px; por debajo de ese ancho, la imagen usa el recorte más cercano. El <img> sigue siendo el elemento mostrado. Proporciona la alternativa y el texto alternativo, y es el elemento al que se aplican los estilos CSS de imagen. Un <picture> sin <img> no muestra ninguna imagen.

Coloca primero las condiciones más específicas

El navegador elige el primer origen compatible cuyas condiciones se cumplan. Supón que ofreces recortes a 30em y 60em. Enumera primero el mínimo de 60em, después el de 30em y, por último, la alternativa. Si 30em aparece primero, también se cumple en una pantalla muy ancha e impide que el navegador llegue a 60em. Los intervalos que no se solapan también pueden aclarar la elección prevista.

La condición media de un origen es una instrucción de selección. En cambio, las opciones normales de srcset y sizes proporcionan información para que el navegador elija una resolución adecuada. Usa dirección de arte cuando deba cambiar la composición; usa selección de resolución cuando el contenido de la imagen siga siendo el mismo.

Ofrece formatos por orden de preferencia

<picture>
  <source type="image/avif" srcset="hall.avif">
  <source type="image/webp" srcset="hall.webp">
  <img src="hall.jpg" width="1200" height="800"
       alt="Rows of seats in a lecture hall">
</picture>

Un navegador que admita el primer formato puede usarlo; de lo contrario, prueba la siguiente opción compatible y, finalmente, la alternativa JPEG. AVIF y WebP suelen ofrecer archivos más pequeños con una calidad visual comparable. El atributo type permite que el navegador omita los formatos que no admite sin descargarlos para averiguarlo.

Cada origen también puede ofrecer varias opciones de ancho con sus propios srcset y sizes. Esto combina un recorte o formato elegido con la selección de resolución. Cuando los recortes elegidos mediante dirección de arte tienen distintas proporciones, los atributos de dimensiones de los orígenes permiten que el navegador reserve el espacio adecuado para cada uno.

Escribe el texto alternativo una sola vez, en <img>, y asegúrate de que describa todos los recortes. Si un recorte cercano elimina a una segunda persona, una descripción alternativa que nombre a dos personas ya no encaja. Para una imagen puramente decorativa, usa alt="" para que no añada contenido hablado innecesario.

Una página adaptable necesita pruebas en una gama de anchos, no solo en unos pocos dispositivos concretos. Abre la vista adaptable del navegador, establece un área de visualización estrecha de unos 320px y arrastra hasta llegar a una ventana ancha. Observa los encabezados, la navegación, las tarjetas y los bordes de las imágenes mientras cambias el ancho. Prueba justo por debajo, en el punto y justo por encima de cada punto de ruptura.

Las herramientas de desarrollo pueden emular las dimensiones del área de visualización, la relación de píxeles del dispositivo y la entrada táctil. Chrome y Edge ofrecen una barra de herramientas de dispositivos; Firefox y Safari ofrecen modos de diseño adaptable. La emulación es útil, pero los dispositivos reales pueden diferir en el comportamiento de las barras de herramientas, la interacción táctil, las fuentes y el rendimiento. Comprueba un teléfono y una tableta reales en ambas orientaciones, además de una ventana de escritorio cuyo tamaño hayas ajustado.

Comprueba la redistribución y el texto ampliado

El criterio AA de redistribución de las WCAG exige que el contenido normal funcione con un ancho de 320 píxeles CSS sin necesidad de desplazarse en dos direcciones. Un área de visualización de 1280px de ancho ampliada al 400 % proporciona ese ancho. Configura un área de visualización adaptable de 320px para una comprobación directa del ancho estrecho y prueba también el zoom real de escritorio para ver cómo se amplía la página.

El contenido que necesita una disposición bidimensional, como una tabla de datos, un mapa o un diagrama, puede conservarla. Mantén cualquier desplazamiento horizontal necesario dentro de su propia región. Los encabezados, las instrucciones y los párrafos que lo rodean deben seguir ajustándose al ancho de la página.

Usa contenido realista: un título largo, una URL sin puntos de corte, muchos enlaces y texto traducido más extenso. Aumenta también el tamaño de fuente predeterminado del navegador. Una caja que parecía holgada con un ejemplo corto puede desbordarse cuando crece el texto.

Localiza el desbordamiento horizontal

Una barra de desplazamiento horizontal o una franja vacía a la derecha suelen indicar que una caja supera el área de visualización. Inspecciona los elementos sospechosos y compara los bordes de sus cajas con el límite de la página. Dibuja temporalmente sus contornos:

* { outline: 1px solid red; }

Un contorno muestra las cajas sin aumentar su ancho medido. Busca anchos fijos, bloques de 100vw, imágenes sin límite de ancho, pistas de cuadrícula con mínimos anchos, márgenes negativos, texto largo y bloques de código.

Adapta la corrección a la causa:

No ocultes el desbordamiento horizontal de toda la página como atajo. body { overflow-x: hidden; } puede hacer desaparecer la barra de desplazamiento mientras deja contenido fuera del alcance del lector.

Para una tabla con desplazamiento local, prueba tanto la interacción como el ancho. Usa el teclado para llegar al contenedor con nombre y comprueba que su desplazamiento horizontal revele todas las columnas. Después continúa con el tabulador hasta el siguiente control. La tabla puede requerir movimiento horizontal sin obligar al párrafo anterior ni al resto de la página a ocupar la misma área de desplazamiento ancha.

Por último, inspecciona las solicitudes de imágenes en el panel Red. Establece tanto un área de visualización del tamaño de un teléfono como una relación de píxeles del dispositivo alta y realista, recarga en las condiciones de prueba previstas y comprueba la opción seleccionada y el tamaño del archivo. Una imagen visualmente pequeña puede seguir suponiendo una descarga grande si su indicación sizes es incorrecta.

El ancho es solo una parte del comportamiento adaptable. Una tableta ancha puede usar interacción táctil; una ventana de escritorio estrecha puede usar un ratón. Las páginas también deben funcionar con zoom, texto más grande, distintas orientaciones y las preferencias de movimiento y color del lector.

Facilita el acceso a los controles

Las pautas de tamaño de las áreas de activación de las WCAG 2.2 AA exigen al menos 24 × 24 píxeles CSS o suficiente separación según su regla de espaciado, con excepciones como los enlaces dentro de frases. El criterio de tamaño AAA usa 44 × 44 píxeles CSS, también con excepciones. Los enlaces de navegación más grandes y con relleno suelen ser más cómodos que una fila densa de etiquetas diminutas.

Con una raíz de 16px, un enlace con texto de 16px, line-height: 1.5 y padding: 0.75rem 1rem tiene una caja de línea de 24px más 12px por arriba y por abajo: 48px de altura. Haz que el propio enlace sea la caja con relleno que se puede pulsar.

La información esencial no debe depender de mantener el puntero sobre un elemento. Mantén las acciones visibles o accesibles mediante una pulsación y el foco del teclado. Añade efectos opcionales al mantener el puntero sobre un elemento solo cuando el dispositivo de entrada principal los admita:

@media (hover: hover) and (pointer: fine) {
  .card:hover { outline: 2px solid currentColor; }
}

pointer: coarse describe una entrada principal imprecisa, como un dedo. any-pointer y any-hover comprueban si algún dispositivo de entrada conectado tiene una capacidad; no establecen que todos los lectores la estén usando.

Permite que funcionen el texto ampliado y la rotación

Mantén el zoom habilitado y verifica que el texto pueda ampliarse al 200 % sin perder contenido ni funcionalidad. Usa tamaños relativos a la fuente y cajas de texto que crezcan. min-height permite que una caja crezca cuando crece su contenido; una altura fija puede dejar que el texto ampliado se salga hacia la siguiente sección.

Admite la orientación vertical y horizontal salvo que una de ellas sea esencial para la actividad. Los teléfonos en horizontal pueden tener muy poco espacio vertical. Una consulta de altura como @media (max-height: 30em) puede permitir que un encabezado adhesivo desaparezca al desplazarse para que no cubra el contenido.

Respeta las preferencias y la salida

Usa prefers-reduced-motion para evitar movimientos grandes a los lectores que soliciten menos. Un enfoque consiste en colocar las animaciones opcionales dentro de @media (prefers-reduced-motion: no-preference). También puedes eliminar una animación existente dentro de una consulta reduce.

Para un tema oscuro, combina colores legibles de texto y fondo dentro de @media (prefers-color-scheme: dark). Comprueba el contraste en ambos temas. color-scheme: light dark permite que los controles y las barras de desplazamiento dibujados por el navegador sigan un tema adecuado; no elige todos los colores de tu página por ti.

Una regla de movimiento reducido puede dirigirse solo al componente animado:

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

Mantén disponible el propio mensaje cuando se elimine el movimiento. Para un tema oscuro, cambia juntos el primer plano y el fondo; cambiar solo uno puede hacer que el texto se confunda con lo que lo rodea. Previsualiza también los controles de formulario, ya que los dibujados por el navegador pueden diferir de las superficies que hayas definido.

Usa @media print para ocultar la navegación y los botones y producir texto oscuro legible sobre blanco. Los enlaces impresos pueden mostrar sus destinos con a[href]::after { content: " (" attr(href) ")"; }. Prueba una vista previa de impresión para comprobar que el contenido, los fondos y los saltos de página sigan siendo legibles.