Introdução à Layout para Diferentes Telas em CSS

No mundo moderno, um site deve ser exibido corretamente em dispositivos com tamanhos de tela variados.

Geralmente, os dispositivos são divididos em quatro classes: computadores (desktop), laptops, tablets (tablet) e telefones (mobile).

Antigamente, nos tempos antigos, os tamanhos de tela populares de todos os dispositivos eram conhecidos, felizmente não havia tantos. E os sites eram feitos para exibir corretamente em uma lista conhecida de resoluções.

Atualmente, há tantos dispositivos que é impossível criar uma lista de resoluções para as quais um site deve ser desenvolvido. Agora, acredita-se que o layout deve ser exibido corretamente em uma tela de qualquer tamanho.

Isso é alcançado reorganizando os blocos em pontos chave do layout. E esses pontos-chave são escolhidos não para dispositivos específicos, mas para o conteúdo do site - para que ele tenha uma boa aparência.

Entre os pontos-chave, a largura dos elementos do site deve ser fluída, para que se ajuste à largura da tela. E nos pontos-chave, os blocos são reorganizados em outras posições.

O layout descrito é chamado de adaptável ou responsivo (responsive). É isso que estudaremos nas próximas lições.