22 de julho de 2007

Unidades de Medida: px X em , parte 2

Olá galera tudo bem? Essa é a segunda (e última) parte do artigo sobre unidades de medida usadas no css.Hoje vou explicar como se usa o em,e falar um pouco sobre layout elásticos.




Migrando para o Em



Se você usa o px pra fazer seus layouts e quer começar a usar o em,use o site em calculator para te ajudar.Neste site você insere o valor em pixel, e ele gera um valor em equivalente.Na parte superior do site,está a fonte padrão dos browsers,que em geral é 16px.Em decimal places,você deve escolher quantas casas decimais você quer que o em seja.Quanto mais casas,mais próximo vai ficar ao valor em pixel,mas como o usuário não usa microscópio,ele não vai notar pequenas diferenças,por isso aconselho a deixar no numero 2 ou 3. Depois de fazer isso,clique em save settings e parta para a parte de baixo.


Na segunda metade do site,você notará uma declaração css cujo o seletor é o body.Na área antes do px,você digita o valor da font-size que está declarada no seletor body (ou no seletor html) do seu css.Feito isso,basta clicar no final dessa caixa-rosa,onde está escrito Add Child (passa o mouse por cima do final desse "box" que você vai ver).Ai aparece outro "seletor" com o nome node2,e com dois ícones no final da caixa,um pra adicionar mais filhos (Add Child) e outro pra adicionar irmãos (Add sibling).


E o que são os layouts elásticos?



Os layouts elásticos são os layouts que aumentam ou diminuem dependendo do tamanho da fonte.Esse tipo de layout se adapta melhor as necessidades do usuário porque deixa com ele a escolha do tamanho do site.


Mais sobre layouts elasticos:




Exemplos de Layout elasticos:



Tags: , ,

3 comentários:

ron disse...
Este comentário foi removido por um administrador do blog.
Haroldo disse...

Ô Guido, vc só esqueceu de falar sobre EM e PX. Quando usá-los, por que usá-los, diferenças entre eles, vantagens, desvantagens...

Guido disse...

@Haroldo

Eu falei sobre isso no artigo anterior a esse ( http://w3css.blogspot.com/2007/07/unidades-de-medida-px-x-em.html ), mas vou tentar aprofundar esse artigo.Obrigado pelo comentario e volte sempre!

[]s