Quando coloco como unidade "1em" num "font-size" para um desktop por exemplo, irá ficar 15px por padrão já do navegador. Mas o "em" vale um tamanho menor para um dispositivo mobile por exemplo, certo?
2 Respostas
EM é uma unidade de medida tipográfica.
Seu nome está relacionada com a letra “M”, onde o tamanho base dessa unidade deriva da largura da letra M em maiúscula. Dizem que 1em equivale aproximadamente 16 pontos.
O problema de utilizar fonts em EM é que elas são variáveis como a porcentagem. Diferentemente da utilização de pixels, temos de calculcar as nossas unidades no projeto.
target ÷ context = result
Um exemplo: imagine um título, H1, cujo seu tamanho de texto seja 20px.
CSS EXEMPLO ORIGINAL
body {
font: normal 100% verdana, arial, tahoma, sans-serif;
}
div {
font: 30px verdana, arial, tahoma, sans-serif;
}
h1 {
font-size: 20px;
}
p {
font-size: 12px;
}
Então o target (que é o elemento que queremos modificar) é 20px. Nesse caso o BODY é o pai do nosso H1. Logo, o valor da font do body é o context (contexto), que como já dissemos tem o valor padrão de 16px. Logo 20 ÷ 16 = 1.25.
Imagine que quer fazer um site mobile ou um site para grandes telas.
Em vez de mudar as fonts de cada elemento, pode simplesmente muda o valor da font do target, ou seja, do body!
CSS EXEMPLO em EM
body {font: 100% verdana, arial, tahoma, sans-serif;}
div {
font-size: 1.88em;
}
h1 {
font-size: 0.67em;
}
p {
font-size: 0.4em;
}
div: 30/16 = 1.88
h1: 20/30 = 0.67 pois está em relação à div
P: 12/30 = 0.4 pois está em relação à div
Mudando o valor de porcentagem da font do body, consegue mudar proporcionalmente a font de todos os outros elementos.
Mas é bastante aborrecido ficar calculado o valor do target e do context para cada um dos elementos.
Então foi criada outra unidade de medida chamada REM
A REM sempre terá o valor de contexto do body
Os valores do nosso exemplo acima ficaria assim se referenciando pelo body e não pelo DIV. Logo os valores ficam como abaixo:
CSS EXEMPLO em REM
body {font: 100% verdana, arial, tahoma, sans-serif;}
div {
font-size: 1.88rem;
}
h1 {
font-size: 1.25rem;
}
p {
font-size: 0.75rem;
}
Usamos sempre a base 16
div: 30/16 = 1.88
h1: 20/16 = 1.25
P: 12/16= 0.75
Mas atenção que alguns navegadores podem não suportar esta medida
Calculador da rem
Calculador da em
Recomendações do uso de unidades em CSS
Isso se da porque em
é uma unidade de medida de distância relativa
Medidas relativas
Para fontes: unidades em
, ex
, ch
, rem
Porcentagem da viewport: unidades vw
, vh
, vmin
, vmax
A especificação do W3C classifica tecnicamente a porcentagem (%) como tipo de dado e não unidade de medida.
São baseadas em outras medidas, ou seja dependendo do dispositivo ela muda
Medidas absolutas
Unidades cm
, mm
, q
, in
, pt
, pc
, px
Sempre estáticas independente do dispositivo e referência