O layout é construído para que se adapte às diversas telas do usuário. Monitores, tablets e celulares. Tudo graças a uma grid de colunas formada por linhas-base que fornecem uma estrutura para o layout.


Exemplo de grid aplicada:



Image Placeholder



Existem vários pontos de "quebra". Seguem as principais:


Telas maiores que 1600px (Desktop em geral)

Como funcionam sites responsivos?

  • 1600x900

  • 1920x1080

  • Maiores que isso são tratados de forma individual, dependendo do projeto.



Telas maiores que 1200px (Tablets e alguns Notebooks)

Como funcionam sites responsivos?

  • 1280x720 

  • 1360x768 

  • 1440x768 



Telas maiores que 960px (Tablets e alguns Celulares)

Como funcionam sites responsivos?

  • 960×540

  • 1024x768



Telas maiores que 640px e menores (Celulares)

Como funcionam sites responsivos?

  • 640×480

  • 320x240