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!

Criando páginas para múltiplos dispositivos

By Vai Na Web

Criando páginas para múltiplos dispositivos

WIP

  • 802