CSS: agosto 2008 Archives

Usando medida em

Na Mídia Digital, por questões de compatibilidade entre os navegadores, nos adotamos como padrão a unidade de medida "em".

"em" é uma medida relativa, isso quer dizer que ela toma como base um valor de referência anteriormente definido.

As quatro unidades de medida relativa que existem são: %, em, ex e px.

Tá mas vamos para a prática!

Escreva 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ágrafo</strong>.</p> </div>

Dentro do head

Explicação:

html e body é ".68em".
A o tamanho da fonte padrão dos navegadores é 16px, então pegamos 11px, que é o valor que queremos, e dividimos por 16px

11/16 = 0.68

11px é igual a 0.68em de 16px. Endendeu?

A lógica é essa! Pegamos o valor que queremos e dividimos pelo valor relativo(um valor de referência que foi definido anteriormente, apenas para lembrar).

x/(valor-relerência) = (valor-que-desejamos).em

Então, quais são os valores dos elementos do html acima. h1, p e strong?

elemento tag	cálculo para restaurar o valor em pixel.	valor aproximado(~=)
h1	1.45(em) * 11(px)	16px
p	1.1(em) * 11(px)	12px
p strong	1.16(em) * 12(px)	14px

O layout que montado com essa medida é conhecido como layout elástico, por causa deste comportamento relativo entre as medidas, sejam elas font-size, width, padding, etc. Essa é uma simples explicação sobre essa medida. Veja também o blog do Carlitos, ele entende bem sobre o assunto. Experimente usar também!