Media queries y desarrollo mobile-first

Las media queries aplican reglas CSS solo cuando se cumplen determinadas condiciones, como que el ancho del viewport supere un umbral. Son la base del diseño adaptable y permiten que una sola hoja de estilos se ajuste a cualquier tamaño de pantalla.

Una media query envuelve un bloque de CSS en una regla @media. Las reglas internas solo se aplican cuando se cumple la condición.

min-width: aplica estilos cuando el viewport tiene como mínimo este ancho (enfoque mobile-first). max-width: aplica estilos cuando el viewport tiene como máximo este ancho (enfoque desktop-first). Prefiera min-width para el desarrollo mobile-first.

Escriba primero el CSS para pantallas pequeñas (fuera de cualquier media query). Después, utilice media queries con min-width para añadir progresivamente complejidad en pantallas más grandes. Esto produce menos CSS para los usuarios móviles y un código más limpio en general.

Elija los breakpoints según el contenido, no según dispositivos concretos. Puntos de partida habituales: 480px (teléfonos grandes), 768px (tabletas), 1024px (ordenadores de escritorio pequeños) y 1280px (ordenadores de escritorio grandes). Evite breakpoints dirigidos a modelos concretos de dispositivos.

Además del ancho de la pantalla, puede dirigirse a tipos de medios: screen para pantallas y print para impresoras. Las media queries para impresión permiten personalizar el aspecto de una página al imprimirla (ocultar la navegación y ajustar los colores).

Encadene condiciones con and: aplique estilos únicamente cuando ambas sean verdaderas. Utilice not y or para una lógica más compleja.

Responda a la preferencia de modo oscuro del sistema operativo del usuario. Proporcione un tema oscuro de forma predeterminada, sin necesidad de un interruptor.

Respete a los usuarios que prefieren menos movimiento (por trastornos vestibulares o epilepsia). Desactive o simplifique las animaciones dentro de esta media query.

Las consultas de contenedor (@container) aplican estilos según el tamaño de un contenedor padre, en lugar del viewport. Permiten una adaptación verdaderamente responsive a nivel de componente y están disponibles en todos los navegadores modernos desde 2023.

Utilice propiedades lógicas como margin-inline-start en lugar de margin-left para crear diseños que funcionen tanto en idiomas de izquierda a derecha como de derecha a izquierda. Prepare sus diseños responsive para el futuro.

@media (min-width: N) para la mejora progresiva con enfoque mobile-first. Escriba los estilos base para móviles sin consultas. Añada complejidad para pantallas más grandes. Utilice prefers-color-scheme para el modo oscuro, prefers-reduced-motion para la accesibilidad y las consultas de contenedor para la adaptación a nivel de componente.