Diseño adaptable con media queries

Sin una etiqueta meta, muchos celulares maquetan la página como si la pantalla fuera mucho más ancha (MDN da como ejemplo 980 píxeles) y luego la achican, así que una media query para celulares nunca se activa.

Una página, todas las pantallas

El diseño adaptable (responsive) consiste en construir una sola página que se adapte a la pantalla en la que aparezca, desde un celular angosto hasta un monitor ancho, en lugar de hacer un sitio móvil aparte. Se apoya en tres ideas: una maquetación hecha con anchos flexibles en lugar de fijos, contenidos multimedia que se escalan dentro de sus contenedores y media queries que ajustan la maquetación en los puntos donde deja de funcionar. Flexbox y grid ya hacen buena parte del trabajo, como mostraron las dos unidades anteriores con las tarjetas que pasan de línea y las columnas auto-fill.

La etiqueta meta viewport

Muchos celulares dibujan las páginas en una ventana gráfica virtual más ancha que la pantalla (MDN da como ejemplo 980 píxeles) y luego achican el resultado, porque los sitios antiguos se hicieron para computadoras de escritorio. En una página pensada para adaptarse, esto estorba: una media query que debería activarse por debajo de 600 píxeles nunca se activa, porque el navegador cree que la pantalla mide 980 píxeles de ancho. <meta name="viewport" content="width=device-width"> en el head le dice al navegador que use el ancho real del dispositivo, medido en píxeles CSS. Nunca agregues user-scalable=no ni un maximum-scale bajo; MDN advierte que bloquear el zoom deja fuera a las personas con baja visión, y WCAG 1.4.4 espera que el texto se pueda ampliar al 200 por ciento.

Anchos fluidos e imágenes

Los anchos fijos son la causa más común del desplazamiento lateral en los celulares. Prefiere max-width a width: max-width: 70rem en un contenedor de página le permite llenar una pantalla pequeña y dejar de crecer en una grande. Las imágenes conservan por defecto su tamaño natural en píxeles, así que una foto de 1200 píxeles se desborda de una pantalla de 390 píxeles. img { max-width: 100%; height: auto; } deja que las imágenes se encojan hasta caber en su contenedor sin perder sus proporciones. WCAG 1.4.10, Reflujo, pide que el contenido funcione con un ancho de 320 píxeles CSS sin desplazamiento en dos direcciones; revisar tu página en una ventana de 320 píxeles de ancho es un buen hábito.

Media queries

Una media query envuelve reglas que solo se aplican cuando una condición se cumple. @media (min-width: 600px) { ... } aplica sus reglas cuando la ventana gráfica mide al menos 600 píxeles de ancho. El enfoque habitual es primero el móvil (mobile first): escribe los estilos base para una pantalla angosta, que suelen ser los más sencillos (una columna, todo apilado), y luego agrega consultas min-width que reorganizan las cosas a medida que crece el espacio. Elige los puntos de corte donde tu contenido empieza a verse mal, no adivinando tamaños de dispositivos populares, porque cada año aparecen tamaños de pantalla nuevos. Escribir los puntos de corte en em, como 40em, también hace que respondan cuando un lector agranda el texto.

/* Base: one column for narrow screens */
.cols { display: grid; gap: 16px; }

/* From 600px: two columns */
@media (min-width: 600px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

/* From 960px: a sidebar layout */
@media (min-width: 960px) {
  .cols { grid-template-columns: 240px 1fr 1fr; }
}

Otras cosas que puede preguntar una consulta

Las media queries pueden comprobar algo más que el ancho. Las características de preferencias del lector vienen de Media Queries Level 5: (prefers-color-scheme: dark) coincide cuando el lector eligió un tema oscuro en el sistema operativo, así que puedes ofrecer colores oscuros de forma automática. (prefers-reduced-motion: reduce) coincide cuando el lector pidió menos movimiento, a menudo porque las animaciones lo marean; desactiva ahí dentro los movimientos grandes y los efectos parallax. (hover: hover), de Level 4, te dice si el puntero principal puede pasar por encima de los elementos, algo que una pantalla táctil no puede hacer. print da estilo a una página para el papel, por ejemplo ocultando el menú. Por último, clamp() ajusta tamaños de forma suave sin ninguna consulta: font-size: clamp(1.5rem, 4vw, 2.5rem) crece con la pantalla, pero nunca baja de 1.5rem ni pasa de 2.5rem.