Me fiz essa pergunta hoje, e saí em busca da resposta, primeiramente fui ao recurso que sempre uso, o Google.
Encontrei, claro, o site do Maujor entre os primeiros resultados e a minha pergunta foi muito bem respondida e vou compartilhar o estudo aqui.
As medidas CSS de comprimento
As unidades de medida de comprimento CSS referem-se a medidas na horizontal ou na vertical (e em sentido mais amplo, em qualquer direção).
O formato para declarar o valor de uma unidade de medida CSS é um número com ou sem ponto decimal imediatamente precedido do sinal ‘+’ (mais) ou do sinal ‘-’ (menos), sendo o sinal ‘+’ (mais) o valor “default” e imediatamente seguido por uma unidade identificadora (medida CSS válida – p.ex., px, em, deg, etc…). A unidade identificadora é opcional quando se declara um valor ‘0′ (zero).
Algumas das propriedades CSS permitem que sejam declarados valores negativos para unidades de medida. A adoção de valores negativos podem complicar a formatação do elemento e devem ser usados com cautela. Se valores negativos não forem suportados pela aplicação de usuário, eles serão convertidos para o valor mais próximo suportado (e isso pode tornar-se desastroso para um layout).
Unidades relativas
• em
• ex
• px – pixel
• % – percentagem
Unidades absolutas
• pt – point :1/72 in;
• pc – pica :12 points ou 1/6 in;
• mm – milímetro :1/10 cm;
• cm – centímetro :1/100 m;
• in – polegada :2,54 cm;
Unidade relativa – é aquela tomada em relação a uma outra medida. Folhas de Estilo em Cascata que usam unidades de comprimento relativas são mais apropriadas para ajustes de uso em diferentes tipos de mídia. (p. ex., de uma tela de monitor para uma impressora laser).
O valor é tomado em relação:
• em: …ao tamanho da fonte (‘font-size’) herdada;
• ex: …a altura da letra x (xis) da fonte herdada;
• px: …ao dispositivo (midia) de exibição;
• %: … a uma medida previamente definida.
Unidade absoluta – é aquela que não esta referenciada a qualquer outra unidade e nem é herdada. São unidades de medida de comprimento definidas nos sistemas de medidas pela física e em fim são os conhecidos “centímetros, polegadas etc.). São indicadas para serem usadas quando as mídias de exibição são perfeitamente conhecidas.
Entendendo as unidades de medida CSS
Vamos a seguir definir e analisar cada uma das unidades de medida CSS e apresentar exemplos práticos.
A unidade de medida – pixel
A unidade de medida de comprimento pixel é relativa a resolução do dispositivo de exibição (p.ex: a tela de um monitor).
Sem entrar em maiores considerações teóricas a mais simplista definição de pixel que encontrei é esta:
Pixel é o menor elemento em um dispositivo de exibição, ao qual é possivel atribuir-se uma cor.
Considere um dispositivo de exibição construido 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 pixel naquele dispositivo de exibição é igual a 1/90 inch = 0,28 mm.
Para uma densidade de 300 dpi 1 pixel é igual a 1/300 inch = 0,085mm
Assim, pixel é uma medida relativa a resolução do dispositivo de exibição.
A unidade de medida – em
A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) do seletor onde for declarada. Quando em for declarada para a propriedade font-size referencia-se ao tamanho da fonte (letra) do elemento pai. Quando em for declarada para o elemento raiz do documento (p. ex: em documentos html) referencia-se ao valor inicial (default) do tamanho de fonte (letra).
Os exemplos abaixo esclarecem as definições:
h1 { line-height: 1.2em }
line-height de <h1> será 20% maior do que o tamanho das letras de
h1 { font-size: 1.2em }
font-size de será 20% maior do que o tamanho das letras herdado por
p.ex.: se h1 estiver contido numa div com font-size=10px então font-size de h1 = 12px
A unidade de medida – ex
A unidade de medida de comprimento ex é igual a altura da letra x(xis) minúscula).
A unidade de medida – percentagem, %
Valores em percentagem são relativos a um outro valor anterior declarado. Este valor anterior há que estar bem definido e em geral esta definição está em uma determinada propriedade do mesmo elemento, na propriedade do elemento “pai” (por exemplo: uma medida CSS de comprimento) ou mesmo no contexto geral da formatação (por exemplo: a largura do bloco de conteúdo).
p { font-size: 10px }
p { line-height: 120% }/*120% de'font-size'=12px*/
Dúvida sanada, agora fica a critério de cada um escolher a sua unidade de medida preferida.
