Criando páginas para múltiplos dispositivos
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
body {
background-color: blue;
}
@media (max-width: 640px) {
body {
background: tomato;
}
}Vamos praticar?
Até a próxima!
