Quando criamos nossos layouts usamos diversos tipos de medidas, usamos as medidas de diversas formas: para dar tamanho aos nossos elementos para especificar distâncias entre os elementos, para especificar o tamanho de textos e por ai vai. Vamos conhecer algumas medidas e entender quando usar cada uma delas.
O pixel é uma unidade fixa que foi muito usada no passado para criar layouts, ele corresponde a um pixel da tela. (Não é bem assim que funciona mas é uma forma de entender).
Podemos usá-lo para especificar tamanhos de elementos, fontes e aplicar espaços, apesar das unidades relativas serem mais apropriadas hoje em dia ele ainda é bastante utilizado.
Alguns exemplos:
.box {
width: 500px;
height: 500px;
}
.container {
margin: 30px auto;
}
.message {
font-size: 24px;
}
Diferente do pixel as medidas em porcentagem são relativas, isso nos possibilita criar layouts flexíveis que se adaptam melhor a diferentes tamanhos de telas. Vamos entender isso com alguns exemplos:
<div class="wrapper">
<div class="box">
</div>
</div>
.wrapper {
width: 500px;
height: 400px;
margin: 20px auto;
}
.box {
width: 50%;
height: 50%;
background-color: red;
}
No código acima temos 2 divs uma com a classe "wrapper" e outra com a classe "box", a div container tem um tamanho fixo de 500px por 400px já a div box tem um tamanho relativo de 50% por 50%.
O que significa ser relativo?
50% de que exatamente?
A unidade de porcentagem sempre usará o elemento container como referência para calcular o valor, no exemplo acima o container da div "box" é a div "wrapper". Isso significa que a "box" vai ter 50% da largura e 50% da altura da classe "wrapper" (250px de largura e 200px de altura).
Guarde isso:
A unidade de porcentagem sempre usará o elemento container como referência
Outra unidade relativa é o em, muito usado para especificar tamanhos de fontes e espaçamentos. Essa unidade usa o tamanho da fonte do container mais próximo para calcular seu tamanho, vamos ao exemplo:
<div class="wrapper">
<div class="box">
</div>
</div>
.wrapper {
width: 500px;
height: 400px;
font-size: 10px;
margin: 20px auto;
}
.box {
width: 50%;
height: 50%;
margin-top: 2em;
background-color: red;
}
Note que nós especificamos uma margem de 2em na classe "box" o que esse valor representa? Se testarmos esse código no navegador e inspecionarmos as medidas vamos ver que essa margem terá o valor de 20px por que?
Esse valor é calculado a partir do tamanho da fonte do container, ou seja, da propriedade font-size da classe "container". Como a classe "container" tem um font-size de 10px temos então: 2em x 10px = 20px.
Diferente do em a unidade rem é sempre relativa ao tamanho da fonte da página, em outras palavras ao tamanho da fonte da tag html. Vamos ao exemplo:
<div class="wrapper">
<div class="box">
</div>
</div>
html {
font-size: 16px;
}
.wrapper {
width: 500px;
height: 400px;
font-size: 10px;
margin: 20px auto;
}
.box {
width: 50%;
height: 50%;
margin-top: 2rem;
background-color: red;
}
Nesse caso a margem da nossa div "box" será de 32px, isso porque a unidade rem vai usar o font-size do html para calcular o tamanho final. Teremos então: 2rem x 16px = 32px.
