Qual unidade de medida utilizar: Pixel, EM ou REM?
Neste post vai explicar o que é cada unidade de medida css e o que é melhor utilizar entre Pixel, EM ou REM em seus projetos
por Wolmir Cezer Garbin - - Front-end - TUTORIAL Última atualização em: | 12607 Visualizações
É comum usar Pixel para determinar tamanhos em páginas web. Mas, hoje, tem formas melhores? O que é melhor utilizar em seus projetos, Pixel, EM ou REM?
Antes de falar sobre o que usar é interessante entender o que é cada um.
Unidade em Pixel (px)
A únidade em Pixel ou simplesmente px é a mais antiga unidade de médida utilizada para css.
É possível utilizar pixels para definir a largura ou largura de elementos, espessura de borda, tamanho de texto e outras.
Pixels é uma médida fácil de usar, principalmente por não ser uma médida variável.
Se medir o tamanho de pixels em uma imagem, é muito fácil transcrever o mesmo tamanho em pixels para o css.
Veja um exemplo:
p {
font-size: 14px;
}
.retangulo {
width: 300px;
height: 20px;
border: 2px solid #555;
}
E no HTML:
<div class="retangulo">
<p>Este é um texto dentro de um retângulo</p>
</div>
Unidade em EM
A unidade de medida EM, está relacionada a letra M, onde o tamanho base dessa unidade deriva da largura da letra M em maiúscula.
O tamanho EM é um tamanho variável, por isso é necessário fazer algumas contas para conseguir o tamanho necessário. Para entender nada melhor que partir para um exemplo.
Calculando EM
A fórmula para calcular valores EM é esta: target ÷ context = result.
Onde: target: é o valor do próprio elemento. context: é o contexto onde o elemento está inserido. result: é o valor em EM
Primeiro exemplo
Vamos pegar um exemplo prático. Veja o código HTML abaixo:
<body>
<p>Um texto aqui</p>
</body>
No CSS temos:
body {
font: 14px verdana, arial, tahoma, sans-serif;
}
p {
font-size: 18px;
}
Aplicando a fórmula para manter o mesmo tamanho da fonte em EM, temos:
18px / 14px = 1.28em
Logo, podemos alterar o CSS do p para:
p {
font-size: 1.28em;
}
Segundo exemplo
Agora que entendemos como funciona, vamos ver um segundo exemplo. Este vai permitir entender melhor a segunda unidade de medida. Considere o HTML:
<body>
<div>
<p>Um texto aqui</p>
</div>
</body>
No CSS temos:
body {
font: 14px verdana, arial, tahoma, sans-serif;
}
div {
font-size: 20px;
}
p {
font-size: 18px;
}
Agora, vamos calcular para transformar o valor de p em EM. Aplicando a fórmula temos:
18px / 20px = 0.9em
Note que pegamos o valor de
20pxpois sempre precisamos calcular com base no contexto, neste caso adiv.
Mas para que ao mudar o valor de body, todos os elementos sejam alterados, precisamos mudar também o valor da div para EM. Aplicando a fórmula temos:
20px / 14px = 1.42em
Ficando assim:
body {
font: 14px verdana, arial, tahoma, sans-serif;
}
div {
font-size: 1.42em;
}
p {
font-size: 0.9em;
}
Sendo assim, podemos alterar todos os tamanhos alterando apenas o tamanho da fonte no body para diferentes dispositivos.
Unidade em REM
Perceba que ficar calculando o valor para todos os elementos é bastante trabalhoso, ainda mais quando se tem várias tags e classes que contenham tamanhos, já que sempre precisamos calcular com base no contexto. Porém se o valor do contexto (context da fórmula) fosse sempre o mesmo, o trabalho seria bem menor.
Pensando neste aspecto, foi criado a unidade de medida REM. O R de REM se refere a ROOT, ou seja sempre do body. Assim do segundo exemplo ficariam assim, para p e para div respectivamente:
p : 18px / 14px = 1.28em div : 20px / 14px = 1.42em
E o CSS final:
body {
font: 14px verdana, arial, tahoma, sans-serif;
}
div {
font-size: 1.42em;
}
p {
font-size: 1.28em;
}
Note que neste caso, o valor de
divfoi desconsiderado, para o cálculo foi usado apenas o valor de14pxque corresponde ao valor debody.
Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.
