Princípios básicos do Web design responsivo

Princípios básicos do Web design responsivo

1. Web design responsivo

   • diferentes layouts para tamanhos de telas
   • conteudos se ajustam

2. defina a janela de visualização

   • TAG META
     • width=device-width
     • initial-scale=1
     • minimum-scale
     • maximum-scale
     • user-scalable

3. Dimensione o conteúdo de acordo com a janela de visualização

   • não usar elementos grandes com largura fixa
   • usar valores relativos "%"
   • consultas de midias css
   • evitar valores absolutos na largura

4. Use consultas de mídia do CSS para aumentar a capacidade de resposta

   • use min-width
   • basear nas caracteristicas do dispositivo
   • tamanhos relativos
     • evita interrupções no layout

5. pontos de interrupção

   • criar pontos com base no conteudo
   • mobile first
   • linhas de textos entre 70 a 80 caracteres
     • Sempre que exceder: criar ponto deinterrupção
   • nâo ocultar conteudo somente por não caber na tela

6. Revise com Chrome Dev Tools