responsive explanation

mini-aula.txt

Então, eu vou apresentar domingo o conceito do mobile first.

O que é o mobile first?

É o ato de criar o sites primeiramente para dispositivos mais limitados como:
1) Celulares,
2) Tablets

Antigamente existiam apenas palmtops, que eram dispositivos muito limitados, telas monocromaticas e tamanhos bem definidos, por isso o CSS2 e o HTML4 não introduziam o conceito que a gente vai ver aqui.

Com o lançamento do iphone, os desenvolvedores se viram obrigados a tornar os sites adaptados aos dispositivos, contudo quando surgiram esses celulares você abria um site e via ele como se estivesse em um computador normal. A experiência do usuário era pessima, ter uma resolução de 1280 em uma tela de 13 polegadas é diferente de ter essa resolução em uma tela de 4 polegadas.

Dai o CSS3 (o que a gente tá estudando) introduziu o conceito de media queries.

O que isso faz? Nos dar a liberdade de definir em quais resoluções as nossas regras de CSS valerão.
-----------------------------
Exemplo:

@media (min-width: 480px) {
	body {
	background: red;
    }
}

Com isso em telas com o tamanho MINIMO de 480px o background vai ser vermelho.
Enfim, isso implica em criar nossos sites para resoluções mais limitadas e ir fazendo ele se adaptar a resoluções maiores. Vou mostrar um exemplo.