Muita coisa aconteceu desde o surgimento da internet, e nossa experiência com a tecnologia também se modificou muito com o passar dos anos.

Não somente no computador, hoje sabemos que é possível nos conectar usando uma infinidade de aparelhos diferentes, televisão, celular, etc. E estamos conectados também nos mais diferentes lugares, seja na padaria, na escola, ou em casa. A web está em todos os lugares!

É nosso dever e desafio enquanto desenvolvedores web, criar páginas que possibilitem que essas experiências aconteçam da melhor forma possível.

Design responsivo

Dizemos que uma página é responsiva, quando os elementos dela se adaptam automaticamente à tela do dispositivo no qual ela está sendo visualizada. Há algumas técnicas que usamos para garantir que isso aconteça. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML

Antes de tudo, precisamos dizer ao navegador que a escala inicial da nossa página é equivalente ao tamanho do dispositivo.

Medidas flexíveis

Precisamos manter as caixas flexíveis. Para isso podemos substituir o px por %, em e outras unidades. Como já aprendemos flexbox, essa parte vai ser tranquila.

Media queries

Usamos elas basicamente para criar modificações na página para que ela se adapte de acordo com uma medida.

@media (max-width: 640px) {
	body {
		background: tomato;
	}
}

Vamos praticar?