A long time ago in a galaxy far, far away, antes dos smartphones e tablets as pessoas navegavam na web utilizando apenas computadores, então o design das páginas era estático. Só que a forma de acessar a web mudou e os tamanhos fixos pensados apenas para desktops eram grandes demais para se encaixar nas telas dos smartphones e tablets.
Daí os navegadores passaram a utilizar o viewport como uma forma de corrigir a escala (lê-se: fizeram um armengue pra se adaptar à largura diferente desses novos dispositivos).
Viewport é basicamente a área visível da sua página, é a área na qual será disposto todo o conteúdo do site. Ele depende do dispositivo utilizado e corresponde ao tamanho da janela do navegador, desconsiderando as barras de ferramenta, rolagem, navegação e etc.
Aí você inclui isso entre < head > e < /head>
1.. < meta name="viewport" content="width=device-width, initial-scale=1" >
Isso assumirá o valor específico de largura para cada aparelho.
indica para o navegador o zoom inicial em que a página deve abrir.
Desenvolver um layout fluído é basicamente não utilizar medidas fixas para como pixels para estabelecer o tamanho dos elementos que compõem o design.
As porcentagens são utilizadas para especificar as medidas de tamanho em relação ao elemento pai.
1 .. body {
2 .... width: 100%
3 .. }
4 .. .left {
5 .... width: 50%;
6 .... float: left;
8 .. }
9 ...right {
10.... width: 50%;
11.... float: right;
13.. }
As classes left e right, filhas de body ocupam cada uma metade do tamanho de body que, por sua vez ocupa 100% da página, portanto cada uma dessas classes ocupa metade da página, independente do seu tamanho.
Também é possível utilizar porcentagens no font-size, fazendo com que o tamanho da fonte de um elemento seja relativo ao tamanho da fonte do elemento pai. O em funciona nessa pegada; definir o tamanho da fonte de um elemento em 300% ou 3em dá no mesmo. Dessa forma, para definir o tamanho de fonte de um elemento 50% menor que a do elemento pai é só utilizar 0.5em.
Ah, o em vai SEMPRE considerar o elemento pai como referência para o tamanho da fonte seguinte, então se no meio do código você resolver alterar o tamanho do texto de um elemento, você acaba alterando o tamanho dos filhos dele também.
O rem funciona mais ou menos como o em só que ao invés de utilizar o elemento pai como referência, ele utiliza o elemento raíz, que é a tag html (daí a letra r no comecinho, vem de root-em).
Isso evita aquele problema de alterar um elemento que utiliza em e acabar alterando o tamanho de todos os seus dependentes.
Isso significa que todos os tamanhos de fontes dos elementos terão como referência o tamanho de fonte estabelecido na tag html.
1..html {
2....font-size: 16px;
3..}
4...son {
5....font-size: 0.5 rem; /* O font-size desse elemento é metade do tamanho do elemento raíz, 8px */
6..}
Ambas as unidades têm relação com a janela do navegador:
Ah, favor não confundir seu uso com o da porcentagem:
A porcentagem utiliza como referência a largura do elemento pai , enquanto que vh e vw utilizam a altura e largura (respectivamente) da janela do navegador como referência pro tamanho, ok? ok.
E aí tá você testando várias dimensões diferentes no navegador tod@ animad@ que o código tá se adaptando ao tamanho da página até que, chega o momento em que, como já dizia Robsão, na época do Black Style,
quebra, todo mundo quebra.
Ok, pode até não quebrar mas, às vezes quando o tamanho da tela é menor, fica tudo estranho e espremido, o que não dá ao usuário a melhor experiência de todas.
É por essas e outras que a gente usa media queries.
A partir delas a gente pode utilizar algo chamado design condicional onde regras de css serão aplicadas em situações específicas. Não entendeu? Perainda.
1.. .item {
2.... width: 25%;
3.. }
4..
5..@media (max-width: 360px) {
6.... .item {
7...... width: 100%;
8.... }
9.. }
Na linha 5 a gente tem a sintaxe do media query, que consiste basicamente em você utilizar o @media e entre os parênteses a condição que deve ser satisfeita.
Nesse caso a largura da classe item é alterada quando a condição (max-width: 360px) é satisfeita, ou seja, enquanto a largura da tela for menor ou igual a 360px, a largura do item vai ser 100% do valor do elemento pai. Quando a largura da tela ultrapassar este valor, a largura de width passará a ser 25% do elemento pai.
Se você ainda não sacou pra que a gente pode utilizar media queries, lembre que celulares têm dimensões diferentes e você vai querer que seu site fique bom independente das dimensões do aparelho no qual ele será visualizado.
E você não precisa ficar testando o site no celular, os navegadores possibilitam que você simule dimensões diferentes no modo de inspeção de elemento.
ctrl + shift + m Uma vantagem do chrome é que o navegador tem pré-definidos as dimensões de alguns dispositivos, o que poupa o trabalho de pesquisar e inserir no navegador.
