20 de julho de 2007

Unidades de Medida: px X em

Olá galera tudo bem? Nesse artigo vou tentar explicar as diferentes unidades de medida do css,em especial a em e o px e as vantagens de usar uma ou outra.




Unidades Relativas:



  • em

  • ex

  • px - pixel

  • % - percentagem



Unidades Absolutas:



  • pt - point

  • pc - pica (no bom sentido)

  • mm - milímetro

  • cm - centímetro

  • in - polegada


Ueh, px é relativo ao que?



Até antes de fazer esse artigo,também achava que px era uma unidade absoluta.Mas depois de ler no Maujor descobri ao que ele (o px) é relativo.Mas o que é um pixel? Um pixel é o menor quadradinho que há em uma tela,então o pixel é relativo a resolução da tela.Não entendeu? Veja esse trecho do artigo do Maujor:



Considere um dispositivo de exibição construído com uma densidade de 90 dpi (dpi = dots per inch = pontos por polegada). Por definição,a referência padrão para pixel é igual a um ponto no citado dispositivo. Daí pode-se concluir que 1 pixelnaquele dispositivo de exibição é igual a 1/90 inch = 0,28 mm.


Entendi, mas e o em?



O em é relativo ao tamanho da fonte do seletor que ela foi declarada. Ex:

p {
font-size: 12pt;
line-height: 1.5em;
}


Ou seja, o line-height vai ser do tamanho 18pt que é 50% a mais que o tamanho da font do seletor.



Mas e quando não tem nenhuma propriedade font-size no meu seletor,a em vai se relacionar ao que? Vai se relacionar ao pai,ao pai do pai,ao pai do pai do pai,etc.Se ela for definido no raiz do documento (seletor html, seletor body) se referencia ao tamanho da letra padrão dos navegadores (que segundo algumas fontes é 16px).



O duelo: px Vs. em

A grande vantagem do px é a facilidade de uso. Com ele você sabe exatamente o tamanho do texto ou aonde aquele elemento vai ficar. Mas o px não traz a acessibilidade necessária nas fontes. Já o em deixa os textos do site muito mais acessível.


Talvez muito de vocês estejam acostumados a utilizar o px em seus layout, mas ele tem certas desvantagens,por exemplo quando o usuário aumenta o tamanho da fonte pelo browser ( exibir > tamanho do texto > aumentar ), a fonte aumenta e quebra o layout, com outras unidades (como o em) isso não acontece, ou seja, o seu layout fica (quase) à prova de balas.



A desvantagem do em é porque ela é muito difícil de se utilizar,você vai precisar de muita atenção no que ela vai se referenciar (ao pai,ao font-size,etc). Mas com o tempo fica mais fácil de usa-la.



Referencias:




Essa é a primeira parte desse artigo,na próxima parte vou dar algumas dicas pra utilizar o em e falar sobre os layouts elásticos.


E você? Qual unidade de medida você usa? E porque você gosta mais dessa?

[]s


Tags: , ,

5 comentários:

Bruno disse...

Gostei... gostei mesmo!
A forma como escreveu o artigo foi muito didática e esclareceu todas as minhas dúvidas.
Parabéns!

Guido disse...

Obrigado pelo comentario Bruno, fico feliz em ter te ajudado, volte sempre!

rassec disse...

Fala Guido, tudo bem?
Sou apenas um iniciante na arte do CSS, e fico cada vez mais impressionado com o que ele faz. E realmente, essa dica é bastante interessante, pois nunca consegui entender porque meu layout quebrava quando aumantava o tamanho da fonte pelo browser. Bom, estou me perdendo pelo seu blog, com tanto artigo interessante. Parabens!!

Abraço!
Junio Rassec

Guido disse...

Obrigado Rassec, comentarios como o seu que me motivam a escrever nesse .blog,

Volte sempre!

RLocatelli Digital disse...

Grato por essas dicas bem esclarecedoras!