Quais medidas CSS usar e quando usar?

Em meio à diversidade de medidas em CSS pode ser difícil para os desenvolvedores web entender quais as unidades usar e quando usar. Por instinto é comum usar apenas uma medida para tudo, mas essa decisão pode limitar muito seus projetos.

Abaixo segue uma lista de sugestões, mas não regras. Se você tem uma opinião diferente ou prática de trabalho (e uma justificativa), por favor, compartilhe nos comentários.

Pixels (px)

Use para: linhas de borda e elementos em geral quando criar designs de largura fixa; valores de sombras em CSS. Evite o uso de @media breakpoints, pois isso quebra páginas quando são ampliadas : uso rem ou em em seu lugar.**Não use para: **tipografia. (Exceção: quando usando em ‘font-size’ de um CSS reset).

Porcentagem (%)

Use para: imagens resposivas e blocos centrais (containers) , em alguns casos no

para definir o height (altura).Não use para: tipografia. (Exceção: font-size de um CSS reset.)

em, ex

Use para: tipografia, e elementos relacionados com tipografia (margens, por exemplo), tendo em mente que em e ex têm algumas sutis “pegadinhas” quando usado em layouts complexos. Considere o uso do rem como uma alternativa.

Points e picas

Use para: estilos de impressão .Não use para: qualquer outra coisa.

rem

Usado como: a alternativa mais robusta e previsível para em e ex , e aplicado para os mesmos fins, incluindo @media query breakpoints.Não usar: se você deseja dar suporte a IE8 ou mais antigos. Ou, use-a, mas inclua um fallback (informando uma medida alternativa numa unidade mais comum antes do rem) ou polyfill.

Viewports (vh & vw)

Use para: tipografia responsiva ; containers responsivos “perfeitos”.O que não usar com essas unidades é difícil de determinar, pois vh & vw são muito novos e ainda foram muito bem explorados em web design. Esteja ciente de que não funciona no IE 8, por isso, adicione fallbacks.

Polegadas (in) e centímetros (cm)

Use com: estilos de impressão, especialmente nas margens da páginaNão use para: qualquer outra coisa.

Caractere (ch)

Use quando: for ajustar tamanho de fontes monoespaçada. Esteja ciente que nem todos navegadores suportam isto.

Grade (GD)

Use para: layouts experimentais, a unidade só é suportada no IE10 ou superior neste momento. Porém Polyfills estão começando a aparecer.

Números

Embora quase todas as propriedades CSS exija que uma unidade seja especificada na declaração, alguns são mais utilizados com inteiro simples ou valores de ponto flutuante. Em particular, o line-height e border-image deve ser usado com números.Traduzido de http://demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When