Introdução ao design responsivo - Ajuda do Webflow
Aprenda como o reflow de conteúdo, tamanhos fixos, tamanhos relativos e breakpoints (media queries) ajudam a criar designs responsivos.
Quando você visita um site no seu dispositivo móvel, pode ver uma versão desktop do site comprimida em uma tela menor—obrigando você a dar zoom e arrastar para ver qualquer conteúdo. Você também pode acessar uma versão móvel simplificada que carece do conteúdo e da experiência que tornam a versão desktop superior. Esperançosamente, você verá um site responsivo—um design que reorganiza e reposiciona o conteúdo com base na largura do navegador.
Existem três aspectos diferentes do design responsivo que abordaremos aqui:
- Reflow de conteúdo
- Tamanho fixo
- Tamanho relativo
- Breakpoints (media queries)
Reflow de Conteúdo
Reflow de conteúdo refere-se ao conteúdo que ajusta sua largura com base na largura da janela do navegador. Por exemplo, um parágrafo com configurações padrão irá automaticamente ajustar seu conteúdo à medida que a largura do navegador diminui. Esse comportamento pode ser emulado arrastando a borda da tela do Designer.
Tamanho Fixo
Tamanho Relativo
Isso se refere a definir o tamanho de um elemento em relação a outras coisas, como a largura do navegador ou um elemento pai. Por exemplo, em vez de usar um tamanho baseado em pixels para uma imagem, considere usar unidades diferentes, como %, VW (largura da janela de visualização) ou VH (altura da janela de visualização). Se você usar % em uma imagem e ajustar a largura do navegador, verá que ela se adaptará adequadamente, enquanto uma imagem baseada em px não se adaptará.
Pontos de Interrupção
Layouts são geralmente muito mais complexos do que gerenciar a largura de uma imagem. Usar pontos de interrupção (também conhecidos como media queries) permite não apenas testar o reflow do conteúdo, mas também modificar o design e o layout com base em diferentes faixas de largura de dispositivos.
Saiba mais: