Por questões de compatibilidade entre os navegadores, nós adotamos como padrão a unidade de medida “em”, principalmente para definição do tamanho das fontes.
“em” é uma medida relativa, isso quer dizer que ela pega como base um valor de referência anteriormente definido.
Exemplo
Coloque em um arquivo html, as seguintes marcações:
Dentro do body:
<div id="conteudo"> <h1>Olá, aqui é o título</h1> <p>E aqui é um <strong>paragráfo</strong>.</p> </div>
Defina o css abaixo para o html de cima:
html { font-size: 100%; }
body { font-size: .68em; }
#conteudo h1 { font-size: 1.45em; }
#conteudo p { font-size: 1.1em; }
#conteudo p strong { font-size: 1.16em; }
Explicação
- html “100%”. Isso atribuí ao html o tamanho da fonte padrão dos navegadores, que é 16px.
- body “.68em”. Como o tamanho da fonte padrão dos navegadores é 16px, pegamos 11px que é o valor que queremos e dividimos por 16px. Com isso chegamos no valor “0.68″.
Cálculo feito: 11/16 = 0.68
A idéia é que 11px é igual a 0.68em de 16px.
Em outros casos será da mesma forma, pegamos o valor que queremos e dividimos pelo valor de referência que foi definido anteriormente.
Na tabela abaixo estão os dados sobre as medidas dos elementos h1, p e strong.
Para compreender melhor esses valores definidos, veja a tabela:
| Elemento | Cálculo para restaurar o valor em pixel. | Valor na unidade “px” | Cálculo para mudar pixel para “em”. | Valor na unidade “em” |
|---|---|---|---|---|
| h1 | 1.45(em) * 11(px) | 16px | 16(px) / 11(px) | 1.45em |
| p | 1.1(em) * 11(px) | 12px | 12(px) / 11(px) | 1.1em |
| strong | 1.16(em) * 12(px) | 14px | 14(px) / 12(px) | 1.16em |
O valor do strong é dividido por 12 porque ele pega o valor do elemento de referência dele, que é o parágrafo e que tem 12px de tamanho da fonte.
Então temos uma fórmula para conversão de “px” para “em” que é:
(valor a ser convertido) / (valor de referência) = (valor que desejamos)
Usando essa medida conseguimos a compatibilidade desejada entre os navegadores.
Veja mais conteúdo sobre unidades de medida usadas no css:
