Objetivos de aprendizagem
Conhecer as técnicas que formam o conceito de design responsivo Aprender a construir páginas Web responsivas com flexbox
%
) em vez de pixels. body
ocupa a largura total da tela do dispositivo (100%
) e já a div
ocupa 75%
do body
e consequentemente 75%
da tela do dispositivo onde a página está sendo exibida, independente do tamanho da tela.max-width : 100%
a imagem. Assim, o tamanho da imagem será no máximo do tamanho do seu elemento pai.div
com largura de 250px
e dentro dela uma imagem. Se a imagem for menor que 250px
ela ficará com seu tamanho original na tela, se a imagem for maior que 250px
ela será redimensionada para caber dentro da div
, pois ela está com a propriedade CSS max-width: 100%
, isso implica que a imagem dentro da div
nunca será exibida maior que o tamanho da div
(250px
), independente do tamanho da tela do dispositivo de acesso.viewport
dentro do head
da página HTML conforme o exemplo <meta name="viewport" content="width=device-width">.
viewport
é a área visível do usuário em uma página da web. Ela varia de acordo com o tamanho da tela do dispositivo, por exemplo: será menor em um telefone celular do que em uma tela de computador. content
da tag viewport
que no exemplo acima é width=device-width
define que a largura da página deve seguir a largura da tela do dispositivo (que irá variar dependendo do tamanho da tela). Portanto, para que as media queries do CSS sejam carregadas aplicadas de forma correta é necessário a inserção da tag viewport
na página HTML, conforme o exemplo acima.body
e div
nas linhas 9 e 14 e imagens flexíveis na linha 21. O body
e div
foram definidos com width: 100%;
, ou seja, esses elementos ocupam toda a tela. Nesse caso, as três divs
da página são exibidas em coluna única, uma abaixo da outra, em dispositivos com telas pequenas, conforme a imagem abaixo:min-width: 720px
, isso indica que as propriedades CSS dentro dessa media query são aplicadas para dispositivos com tamanho de tela a partir de 720px
. Nessa media query foi definida somente uma propriedade CSS, que altera a largura dos elementos div
para width: 50%;
Quando acessado por um dispositivo de tela média (de 540px até 719px
), as três divs
da página são exibidas em duas colunas, as duas primeiras divs
são exibidas uma ao lado da outra e a última div
é exibida abaixo, conforme a imagem abaixo:min-width: 540px
, isso indica que as propriedades CSS dentro dessa media query são aplicadas para dispositivos com tamanho de tela a partir de 540px
. Nessa media query foi definida somente uma propriedade CSS, que altera a largura dos elementos div
para width: 33%;
Quando acessado por um dispositivo de tela média grande (igual ou maior a 720px
), as três divs
da página são exibidas em três colunas, uma ao lado da outra, conforme a imagem abaixo: display: flex; flex-wrap: wrap; justify-content: space-between;
display
do elemento com o valor flex. Desse modo, os elementos-filhos desse contêiner tornam-se do tipo flex. body { display: flex;}
, define o elemento body
como um flex contêiner, tornando os seus filhos flex-itens
, ou seja, todos os elementos que estão imediatamente dentro do body
tornam se flexíveis, sendo alinhados de acordo com as propriedades definidas no flex contêiner.