Design responsivo

Recursos da Web: Consultas de contêiner (tamanho) Unidades de janela de visualização pequenas, grandes e dinâmicas aspect-ratio min(), max() e clamp() Unidades de janela de visualização

Práticas recomendadas gerais

  • Use consultas @container para criar layouts responsivos baseados em componentes que se adaptam ao tamanho do contêiner pai, em vez da janela de visualização. Consulte Estilo de acordo com o tamanho para mais detalhes.
  • Use unidades de janela de visualização dinâmicas (dvh, dvw) em vez de vh/vw para evitar quebras de layout quando elementos da interface do navegador para dispositivos móveis (como barras de endereço) aparecem ou desaparecem.
  • Use aspect-ratio para elementos de mídia (como <img> e <video>) para reservar espaço durante o carregamento e evitar a Cumulative Layout Shift (CLS).

Para entender a mecânica de layout por trás da interface responsiva (flexbox, grade, unidades de consulta de contêiner, unidades de janela de visualização), consulte Layouts CSS e design responsivo.

Tipografia responsiva

  • FAÇA a combinação de unidades relativas à janela de visualização e à fonte em clamp() para tamanhos de fonte que se ajustam ao tamanho da janela de visualização, garantindo que permaneçam dentro de um intervalo desejado. Por exemplo, clamp(2rem, 1rem + 5vw, 4rem). Ajuste a proporção de unidades relativas à janela de visualização e à fonte para controlar a rapidez com que o tamanho da fonte muda.
  • NÃO use vw sozinho para o tamanho da fonte sem clamp(), porque isso pode deixar o texto muito pequeno ou muito grande em telas extremas.

Para dimensionar o tipo e o espaçamento com o contêiner em vez da janela de visualização, consulte Escalonamento fluido.