Unidades CSS

Ao especificar valores numéricos ou comprimento para propriedades CSS tais como width ou font-size você tem uma escolha de unidades diferentes. Os mais usados são 3 pixels, valores relativos e percentuais.

Pixels

Pixels são os pequenos pontos que compõem a tela do computador e são a unidade mais precisa você pode usar para esse meio. Se você definir uma largura de 100 pixels que será exibido exatamente como isso, nem mais nem menos. Para definir valores em pixels que você simplesmente acrescentar um direito px após o valor.

CSS unidade pixel

img {width:100px}

Valores relativos

Os valores relativos são frequentemente utilizados para font-size , Embora possam ser usados para qualquer outra propriedade numérica, também. Eles são relativos ao elemento atual e são definidos por um acréscimo em. 1em sempre usa o valor atual inalterado, 2em usa o casal e meia 0.5em usa do mesmo (em meios tecnicamente em relação à largura do caractere m minúsculas na atual fonte).

CSS unidade de valor relativo

body {font-size:13px}
p {font-size:2em}

Acima de código define a font-size de 13 pixels para o elemento do corpo. Os elementos no interior do corpo utilizar um valor relativo de 2em, duplicando assim o valor para 26 pixels.

Se usarmos 1.9em vez, o valor do ponto irá resultar em 24,7 pixels. Porque uma tela de computador só pode apresentar pixels todo o navegador vai tentar arredondar o valor para 24 ou 25 pixels ou pixels, que por vezes podem causar inconsistências entre navegadores.

Percentagens

Percentagens trabalho muito bonito da mesma forma que os valores relativos. 100% corresponde ao valor actual inalterada, 200% dobra-lo e assim por diante. Percentagens são definidas por um acréscimo%.

CSS unidade percentual

body {font-size:13px}
p {font-size:200%}

Zero

Quando um valor é definido para zero, não há necessidade de indicar uma unidade.

CSS valor zero

p {border-width:0}

Outras unidades

Existem algumas unidades, mais raramente usado como pc (picas), cm (centímetro), mm (milímetros), in (polegadas) e pt (pontos).

Orientações de uso

1. Valores relativos de fontes

Um site deve ser flexível e redimensionável, incluindo fontes (mantendo pressionada a tecla Ctrl e mover a roda do mouse). Algumas versões mais antigas do Internet Explorer recusar-se a redimensionar fontes se você especificar o font-size em pixels. Use um valor relativo em vez disso. 76% para o <body> fonte e em outras fontes para todos é uma técnica comumente usada para obter fontes consistentes em todos os navegadores.

2. Pixels apenas se necessário

A regra geral é utilizar valores relativos e percentuais, sempre que possível para garantir um layout flexível em todos os meios de comunicação. Apesar de pixels estão ok, se você precisa posicionar as coisas com muita precisão no ecrã.