29 May 09 CSS – Unidade Relativa EM
Primeiramente esse post é dedicado ao César Ribeiro e ao Augusto Gomes que me pediram isso, mas que poderá ajudar outras pessoas.
Mas antes de explicarmos o em e como ele trabalha, vamos entender unidade relativa, o que é isso?
Unidade relativa é aquela definida em relação a uma outra medida, usa-se unidade relativa pois ela acaba se ajustando a todos os tipos de midias, mas ela acaba exigindo mais habilidade na hora de montar o css. Ex: Mobile, que de celular para celular muda tamanho de tela.
No nosso caso aqui hoje será o em, que é definido em relação ao tamanho da fonte herdada. Não se sabe ao certo a sua denominação, mas presume-se que seja um acronimo de Equivalent Measure.
Recapitulando: a medida EM será definida em relação ao tamanho da fonte herdada, ótimo, mas como faz?.
Exemplo:
Vamos definir o html com font 16px assim:
<style type=”text/css”>
html{font-size: 16px;font-family:verdana;}
</style>
No html:
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-BR” lang=”pt-BR”>
<head>
<title>Exemplo de EM</title>
<style type=”text/css”>
html{font-size: 16px;font-family:verdana;}
</style>
</head>
<body>
<p>Usando a font definida para a tag html que foi de 16px</p>
</body>
</html>
Agora vamos colocar uma div e dentro dessa div, um texto qualquer com tamaho 10px que transformando para EM no nosso caso vai ser 0.625em
<div id=”herdando”>
Usando a font definida para a tag div.herdando que foi de 10px ou 0.625em – Verdana<br />
</div>
mas Marcelo para tudo, como chega no 0.625em ou saber quanto 0.625em equivale em px?
Vamos la, a conta é simples.
Obs: 1em – 10px
Html – 16px – 1.6em
Nosso Texto – 10px
em “EM” equievale á: 10/16 = 0.625
Ou seja peguei o valor da font acima da div que criamos, que no nosso caso é a tag html e fiz a divisão pelo valor que eu queria que a div tivesse, que no nosso caso foi 10px.
Beleza e se abaixo dessa div, tiver um P e nesse P eu colocar outra fonte, com tamanho 8px, qual sera o em?
Estrutura:
Html(16px – 1.6em)
Div(10px – 0.625em)
P(8px – ?em)
Mesma conta feita anteriormente mas agora pegaremos o valor do P que é 8px e dividiremos pelo valor da tag pai que neste caso é a div que tem valor 10px.
8/10 = 0.8em
E se eu tiver uma medida em EM e quero saber quanto ela equivale em PX, conta inversa, só que ao inves de dividir vamos multiplicar, assim:
0.8(Da Tag P)*10px da tag pai = 8px é a tag P que equivale a 0.8em
Da DIV é a mesma coisa, vamos super que tinhamos o valor 0.625em e queriamos saber quanto equivale em PX.
0.625(Da tag Div) * 16px(Da tag pai que é o Html no nosso caso) = 10px
e se não tivessemos o 16px, tivessemos somente o 1.6em.
Partiriamos desde o começo em que 1em equivale a 10px, portanto 1.6em * 10 = 16px
E depois iamos achando os PX das tags debaixo.
É isso pessoal, abaixo tem o site de uma calculadora online para te dar as medidas em EM
http://riddle.pl/emcalc/
e nosso exemplo completo:
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-BR” lang=”pt-BR”>
<head>
<title>Exemplo de EM</title>
<style type=”text/css”>
html{font-size: 16px;font-family:verdana;}
#herdando{font-size: 0.625em;font-family:verdana;}
</style>
</head>
<body>
<p>Usando a font definida para a tag html que foi de 16px</p>
<div id=”herdando”>
Usando a font definida para a tag div.herdando que foi de 10px ou 0.625em – Verdana<br />
</div>
</body>
</html>
Outros sites com referencias sobre o EM:
http://maujor.com/tutorial/medidascss.php
http://www.emprimeiro.com.br/tutoriais/tutorial-medidas-css.html
Obrigado,
Marcelo
Tags: CSS, em, unidade relativa
Leave a Comment
