Diseño responsivo

Funciones web: Consultas de contenedores (tamaño) Unidades de viewport pequeñas, grandes y dinámicas aspect-ratio min(), max() y clamp() Unidades de viewport

Prácticas recomendadas generales

  • Usa consultas @container para crear diseños responsivos basados en componentes que se adapten al tamaño de su contenedor superior en lugar del viewport. Consulta Estilo adaptado al tamaño para obtener más detalles.
  • Usa unidades de viewport dinámicas (dvh, dvw) en lugar de vh/vw para evitar que se rompa el diseño cuando aparezcan o desaparezcan elementos de la IU del navegador para dispositivos móviles (como las barras de direcciones).
  • Usa aspect-ratio para los elementos multimedia (como <img> y <video>) para reservar espacio durante la carga y evitar el Cumulative Layout Shift (CLS).

Para conocer los mecanismos de diseño detrás de la IU responsiva (flexbox, cuadrícula, unidades de consulta de contenedor, unidades de viewport), consulta Diseños de CSS y diseño responsivo.

Tipografía responsiva

  • SÍ combina unidades relativas al viewport y a la fuente en clamp() para los tamaños de fuente que se ajustan al tamaño del viewport y, al mismo tiempo, asegúrate de que se mantengan dentro del rango deseado. Por ejemplo, clamp(2rem, 1rem + 5vw, 4rem). Ajusta la proporción de unidades relativas al viewport y a la fuente para controlar la rapidez con la que cambia el tamaño de la fuente.
  • NO uses vw solo para font-size sin clamp(), ya que puede escalar el texto demasiado pequeño o demasiado grande en pantallas extremas.

Para escalar el tipo y el espaciado con el contenedor en lugar de la ventana de visualización, consulta Escalamiento fluido.