Escalonamento fluido

Visão geral

O escalonamento fluido permite que os componentes ajustem as proporções internas (como tamanhos de fonte e espaçamento) com base nas dimensões atuais. Isso cria um design mais coeso do que alternar entre pontos de interrupção fixos.

Enquanto o dimensionamento fluido era feito usando unidades de janela de visualização (dimensionamento com base no tamanho da tela), as unidades de consulta de contêiner modernas permitem que os componentes sejam dimensionados em relação ao contêiner pai. Isso garante que os componentes fiquem bem, independentemente de onde forem colocados em um layout, promovendo um melhor isolamento e reutilização de componentes.

Implementação

1. Definir um contêiner

Para usar unidades de consulta de contêiner, primeiro é necessário definir um contexto de contenção em um elemento pai.

.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. Usar unidades de consulta de contêiner

Use unidades de consulta de contêiner (cqi, cqb etc.) para definir tamanhos relativos às dimensões do contêiner.

• cqi: 1% do tamanho inline do contêiner (largura em modos de escrita horizontal).
• cqb: 1% do tamanho do bloco do contêiner (altura nos modos de escrita horizontal).

Observação: as unidades de contêiner podem ser usadas diretamente em qualquer propriedade sem precisar de uma regra de consulta @container. Eles são resolvidos automaticamente com base no ancestral mais próximo com um 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. Restringir valores com clamp()

Para evitar que os tamanhos fiquem muito pequenos ou muito grandes, use a função clamp() do CSS. Isso afeta a capacidade do usuário de aumentar o zoom ou ajustar o tamanho da fonte base. Para garantir que o texto atenda às diretrizes de acessibilidade, o tamanho máximo não pode ser mais de 2,5 vezes maior que o tamanho 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);
}

Estratégias de fallback

Se as consultas de contêiner não forem compatíveis com o navegador, forneça um substituto usando unidades de janela de visualização ou consultas de mídia padrão.

.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);
  }
}

Esse substituto garante que o texto ainda seja dimensionado, mas com base na largura da tela, e não na largura do componente. Isso precisa ser testado para verificar se funciona no seu caso de uso.