Escalamiento fluido

Descripción general

El escalamiento fluido permite que los componentes ajusten sus proporciones internas (como los tamaños de fuente y el espaciado) según sus dimensiones actuales. Esto crea un diseño más coherente que saltar entre puntos de interrupción fijos.

Si bien el escalamiento fluido se lograba históricamente con unidades de viewport (escalamiento según el tamaño de la pantalla), las unidades de consulta de contenedor modernas permiten que los componentes se escalen en relación con su contenedor superior. Esto garantiza que los componentes se vean bien, independientemente de dónde se coloquen en un diseño, lo que promueve un mejor aislamiento y reutilización de los componentes.

Implementación

1. Define un contenedor

Para usar unidades de consulta de contenedor, primero debes definir un contexto de contención en un elemento superior.

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. Usa unidades de consulta de contenedor

Usa unidades de consulta de contenedor (cqi, cqb, etc.) para establecer tamaños relativos a las dimensiones del contenedor.

• cqi: Es el 1% del tamaño intercalado del contenedor (ancho en los modos de escritura horizontal).
• cqb: Es el 1% del tamaño del bloque del contenedor (altura en los modos de escritura horizontal).

Nota: Las unidades de contenedor se pueden usar directamente en cualquier propiedad sin necesidad de una regla de consulta @container. Se resuelven automáticamente según el ancestro más cercano con un container-type definido.

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. Restringe los valores con clamp()

Para evitar que los tamaños sean demasiado pequeños o demasiado grandes, usa la función clamp() de CSS. Esto afecta la capacidad del usuario para acercar o ajustar el tamaño de la fuente base. Para garantizar que el texto cumpla con los lineamientos de accesibilidad, el tamaño máximo no debe ser superior a 2.5 veces el tamaño mínimo.

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

Estrategias de resguardo

Si el navegador no admite las consultas de contenedores, debes proporcionar un resguardo con unidades de viewport o consultas de medios estándar.

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

Este resguardo garantiza que el texto siga escalando, pero se basará en el ancho de la pantalla, en lugar del ancho del componente. Esto se debe probar para verificar que funcione en tu caso de uso.