=>
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 ( div pai ).
result: é o valor em EM.
=>
A diferença do REM para o EM é o root
pois nos cálculos para o REM a div pai sempre será o valor do font-size no seu navegador( context ) .
E não um valor variável.
Logo , 1 rem = font-size do seu navegador / font-size do próprio elemento.
Supomos que o meu navegador esta configurado à ter font-size: 16px (context)
- e o meu elemento atual ( target) tenha font-size:16px
-meu rem será 16/16 = 1rem;
Se caso meu elemento atual tivesse font-size : 200px
- meu rem será 200/16 = 12,5rem
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
Vamos pegar outro exemplo prático mas agora, para REM. 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 REM, quando o navegador foi configurado para ter font-size : 16px temos:
14px / 16px = 0.875rem
18px / 16px = 1.125rem
Logo, podemos alterar o CSS do p para:
p { font-size: 0.874em; }
body { font-size: 1.125rem }
Terceiro exemplo
Vamos pegar outro exemplo prático mas agora escolhendo o root (padronizando o percentual % ), para REM. Veja o código HTML abaixo:
Padronizando o percentual % que pego do font-size do navegador para resultar em 1rem = 10px
eu preciso descobrir quantos % eu preciso do font-size do navegador.
Supomos o navegador ter 16px de font-size , eu preciso de apenas 10px . Logo quantos % de 16px eu preciso calcular para chegar nos 10px ?
Quantos porcento de 16px será = 10px ?
? % de 16 = 10px
Encontramos isto fazendo o calculo 10/16 = 62,5
Logo, 62,5 % de 16px = 10px
Isso faz com que todo 1 rem seja = 10px
:root {
font-size: 62.5%
}
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 REM, quando o navegador foi configurado para ter font-size : 16pxtemos:
Lembra que o root é apenas 10px , logo no calculo so precisa voltar uma casa decimal de qualquer valor em pixel
14px / 10px = 1.4rem
18px / 10px = 1.8rem
Logo, podemos alterar o CSS do p para:
p { font-size: 1.4em; }
body { font-size: 1.8rem }