Responsividade Fluida (Fluid Responsive)

Ferramentas

Duas opções para tornar o seu site Client-First Webflow responsivo de forma fluida:

1. O configurador visual de trechos de CSS nesta página
2. O mesmo configurador visual na Extensão Finsweet
   

O que é responsividade fluida?

Conforme o tamanho da viewport do navegador muda, o design se ajusta com ele.

Comparação de responsividade fluida do Client-First com o escalonamento vw e vh

Conforme o tamanho da viewport do navegador muda, o design se ajusta com ele.

Usar unidades vw ou vh é uma maneira de tornar nosso conteúdo responsivo de forma fluida ao escalonar. Os problemas com esse método são:

• Precisamos definir tamanhos de unidade vw ou vh em cada elemento que desejamos que seja responsivo de forma fluida.
• Os elementos podem rapidamente ficar muito pequenos ou muito grandes devido ao escalonamento linear. vw e vh escalam linearmente.
• A acessibilidade sofre porque o zoom do navegador não pode afetar ambas as unidades vw e vh.
• Pode ser desafiador gerenciar e manter nosso projeto Webflow em vw e vh, especialmente para outros desenvolvedores e clientes.

O Client-First usa o "dimensionamento da fonte-raiz" em vez disso.

Dimensionamento da fonte-raiz

O sistema Client-First usa unidades rem para todos os tamanhos. A unidade rem é baseada em uma coisa – o tamanho da fonte-raiz HTML.

Tudo em nosso projeto é relativo ao tamanho da fonte HTML. Por causa disso, temos controle global sobre todos os tamanhos em nosso projeto.

Ao modificar esse tamanho, estamos efetivamente tornando nossos rems "maiores" ou "menores" visualmente. Nosso gerador visual de responsividade fluida funciona com um extenso conjunto de cálculos que modificam o tamanho da fonte raiz de acordo com nossas preferências.

Adicionando o código CSS gerado, nosso projeto Webflow segue regras personalizadas de dimensionamento. Alterar o tamanho da fonte HTML em pontos de interrupção dá a nós a customização final de nosso dimensionamento de responsividade fluida.

Benefícios:

• Use o Client-First como você costuma usar. Não há mudança específica no fluxo de trabalho para sites responsivos ou não responsivos.
• A estratégia de responsividade fluida é um complemento opcional. Adicione-a ou não em qualquer projeto.
• A responsividade fluida pode ser adicionada no final do projeto, após tudo ser desenvolvido.
• Os navegadores podem ampliar normalmente.
• As configurações de tamanho da fonte do navegador que são modificadas pelos usuários finais serão respeitadas.
• Manter um projeto Webflow em rem é mais fácil do que um projeto com base em tamanhos fixos de vw ou vh.

Construa visualmente a responsividade fluida

1. Configure visualmente as regras de dimensionamento fluido responsivo.
2. Copie o código CSS para o projeto Webflow do Client-First.
3. Desfrute de um site fluido responsivo em rems.