Ouvi dizer que você deve definir tamanhos e distâncias em sua folha de estilo com em vez de em pixels. Portanto, a pergunta é por que devo usá-los em vez de px ao definir estilos em css? Existe um bom exemplo que ilustra isso?

É errado dizer que uma é uma escolha melhor que a outra (ou ambas não teriam seu próprio objetivo na especificação). Pode até valer a pena notar que o StackOverflow faz uso extensivo de unidades de px. Não é a má escolha que Spoike recebeu.

Definição de unidades

• px é uma unidade de medida absoluta (como em , pt ou cm ) que também é 1/96 de uma unidade em (mais sobre o motivo mais tarde). Por ser uma medida absoluta, ela pode ser usada sempre que você desejar definir algo como um tamanho específico, em vez de ser proporcional a algo como o tamanho da janela do navegador ou o tamanho da fonte.

  Como todas as outras unidades absolutas, as unidades de px não são dimensionadas de acordo com a largura da janela do navegador. Portanto, se todo o design da sua página usar unidades absolutas como px, em vez de % , ele não se adaptará à largura do navegador. Isso não é inerentemente bom ou ruim, apenas uma escolha que o designer precisa fazer entre aderir a um tamanho exato e ser inflexível versus alongamento, mas no processo não aderir a um tamanho exato. Seria típico para um site ter uma mistura de objetos de tamanho fixo e tamanho flexível.

  Elementos de tamanho fixo geralmente precisam ser incorporados à página - como banners, logotipos ou ícones de publicidade. Isso garante que você quase sempre precise de pelo menos algumas medidas baseadas em px em um design. As imagens, por exemplo, serão (por padrão) redimensionadas, de modo que cada pixel tenha 1 * px * de tamanho; portanto, se você estiver projetando uma imagem, precisará de unidades de px . Também é muito útil para o dimensionamento preciso da fonte e para larguras de borda, onde, devido ao arredondamento, faz mais sentido usar unidades de px para a maioria das telas.

  Todas as medições absolutas estão rigidamente relacionadas entre si; isto é, 1in é sempre 96px , assim como 1in é sempre 72pt . (Observe que 1in quase nunca é realmente uma polegada física quando se fala de mídia baseada em tela). Todas as medições absolutas assumem uma resolução de tela nominal de 96ppi e uma distância nominal de visualização de um monitor de mesa; nessa tela, um px será igual a um pixel físico na tela e um emserá igual a 96 pixels físicos. Nas telas que diferem significativamente na densidade de pixels ou na distância de visualização, ou se o usuário tiver ampliado a página usando a função de zoom do navegador, px não será mais necessariamente relacionado a pixels físicos.

• em não é uma unidade absoluta - é uma unidade que é relativa ao tamanho da fonte atualmente escolhido. A menos que você tenha substituído o estilo da fonte, definindo o tamanho da fonte com uma unidade absoluta (como px ou pt ), isso será afetado pela escolha das fontes no navegador ou no sistema operacional do usuário, se elas tiverem uma, portanto, não faz sentido. para usá-los como uma unidade geral de comprimento, exceto onde você deseja que ele seja dimensionado conforme o tamanho da fonte.

  Use- os quando desejar especificamente que o tamanho de algo dependa do tamanho da fonte atual.

• % também é uma unidade relativa, nesse caso, relativa à altura ou largura de um elemento pai. Eles são uma boa alternativa às unidades de px para itens como a largura total de um design, se o seu design não contar com tamanhos de pixel específicos para definir seu tamanho.

  O uso de % unidades em seu design permite que ele se adapte à largura da tela / dispositivo, enquanto o uso de uma unidade absoluta como px não.

Eu tenho um laptop pequeno com alta resolução e preciso executar o Firefox com zoom de texto de 120% para poder ler sem fechar os olhos.

Muitos sites têm problemas com isso. O layout fica distorcido, o texto nos botões é cortado pela metade ou desaparece completamente. Até o stackoverflow.com sofre com isso:

Observe como os botões superiores e as guias da página se sobrepõem. Se eles tivessem usado unidades em vez de px, não haveria um problema.

A razão pela qual eu fiz essa pergunta foi que eu esqueci como usá-los, já que fazia um tempo que eu estava hackeando alegremente o CSS. As pessoas não perceberam que eu mantinha a pergunta em geral, pois não estava falando sobre o dimensionamento de fontes em si. Eu estava mais interessado em como definir estilos em qualquer elemento de bloco na página.

Como Henrik Paul e outros apontaram, é proporcional ao tamanho da fonte usada no elemento. É uma prática comum definir tamanhos em elementos de bloco em px, no entanto, o dimensionamento de fontes nos navegadores geralmente quebra esse design. O redimensionamento de fontes geralmente é feito com as teclas de atalho Ctrl+ +ou Ctrl+ -. Portanto, uma boa prática é usar os em vez disso.

Usando px para definir a largura

Aqui está um exemplo ilustrativo. Digamos que temos uma tag div que queremos transformar em uma caixa de data elegante, talvez tenhamos um código HTML parecido com este:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Uma implementação simples definiria a largura da date-boxclasse em px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

O problema

No entanto, se quisermos dimensionar o texto em nosso navegador, o design será interrompido. O texto também sangrará fora da caixa, que é quase o mesmo que acontece com o design da SO, como aponta Flodin . Isso ocorre porque a caixa permanecerá do mesmo tamanho em largura à qual está bloqueada 50px.

Usando em vez disso

Uma maneira mais inteligente é definir a largura no ems:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

Dessa forma, você tem um design fluido na caixa de data, ou seja, a caixa será dimensionada juntamente com o texto na proporção do tamanho da fonte definido para a caixa de data. Neste exemplo, o tamanho da fonte é definido em *10 pontos e será dimensionado 2,5 vezes para esse tamanho de fonte. Portanto, quando você estiver dimensionando as fontes no navegador, a caixa terá 2,5 vezes o tamanho da fonte.

A resposta mais votada aqui de thomasrutter está certa em sua resposta sobre o em . Mas está muito errado o tamanho de um pixel. Portanto, mesmo que seja antigo, não posso deixar que isso seja inquestionável.

Uma tela de computador normalmente NÃO é 96dpi! (Ou ppi, se você quiser ser pedante.)

Um pixel NÃO possui um tamanho físico fixo.
(Sim, ele é fixado em apenas uma tela, mas na próxima tela é provável que um pixel seja maior ou menor e certamente NÃO 1/96 de polegada.)


Prova
Desenhe uma linha com 960 pixels de comprimento. Meça-o com uma régua física. São 10 polegadas? Não..?
Conecte seu laptop à sua TV. A linha está 10 polegadas agora? Ainda não?
Mostre a linha no seu iPhone. Ainda do mesmo tamanho? Por que não?

Quem diabos inventou o mito da tela do computador de 96 dpi?
(Algumas religiões operam com um mito de 72dpi. Mas igualmente errado.)

É útil para tudo o que é escalável de acordo com o tamanho da fonte.

É especialmente útil em navegadores que implementam o zoom escalando o tamanho da fonte. Portanto, se você dimensionar todos os seus elementos, emeles serão dimensionados de acordo.

Como o em ( http://en.wikipedia.org/wiki/Em_(typography) ) é diretamente proporcional ao tamanho da fonte atualmente em uso. Se o tamanho da fonte for, digamos, 16 pontos, um em é 16 pontos. Se o tamanho da fonte for 16 pixels ( nota : não é o mesmo que pontos), um em é 16 pixels.

Isso leva a duas coisas (relacionadas):

1. é fácil manter proporções, se você optar por editar o tamanho da fonte no seu CSS posteriormente.
2. Muitos navegadores suportam tamanhos de fonte personalizados, substituindo seu CSS. Se você projetar tudo em pixels, seu layout poderá ser quebrado nesses casos. Mas, se você usar o ems, essas substituições devem atenuar esses problemas.

exemplo:

Code: body {font-size: 10px;} // mantenha 10 em todos os tamanhos abaixo do correto, altere esse valor e o restante mude para, por exemplo, 1,4 desse valor

1 {tamanho da fonte: 1.2em;} // 12px

2 {tamanho da fonte: 1.4em;} // 14px

3 {tamanho da fonte: 1.6em;} // 16px

4 {tamanho da fonte: 1.8em;} // 18px

5 {tamanho da fonte: 2em;} // 20px

...

corpo

1

2

3

4

5

alterando o valor no corpo, o restante muda automaticamente para ser um tipo de vezes o valor base ...

10 × 2 = 20 10 × 1,6 = 16 etc

você pode ter o valor base como 8px… então 8 × 2 = 16 8 × 1,6 = 12,8 // pode ser arredondado pelo navegador

Um motivo muito prático é que o IE 6 não permite que você redimensione a fonte se ela for especificada usando px, enquanto o faz se você usar uma unidade relativa, como em ou porcentagens. Não permitir que o usuário redimensione a fonte é muito ruim para a acessibilidade. Embora esteja em declínio, ainda existem muitos usuários do IE 6 por aí.

use px para posicionamento preciso dos elementos gráficos. use em para medições que precisam posicionar e espaçar em torno de elementos de texto, como altura da linha etc. px é preciso em pixels, eles podem mudar dinamicamente com a fonte em uso

O principal motivo para usar em ou porcentagens é permitir que o usuário altere o tamanho do texto sem interromper o design. Se você projetar com fontes especificadas em px, elas não mudarão de tamanho (no IE 6 e outros) se o usuário escolher o tamanho do texto - maior . Isso é muito ruim para usuários com deficiências visuais.

Para vários exemplos e artigos sobre designs como esse (há uma infinidade de opções), consulte a edição mais recente de A List Apart: Fluid Grids , o artigo anterior Como dimensionar texto em CSS ou Bulletproof Web Design de Dan Cederholm .

Suas imagens ainda devem ser exibidas com tamanhos de px, mas, em geral, não é considerado uma boa forma dimensionar seu texto com px.

Por mais que eu pessoalmente despreze o IE6, atualmente é o único navegador aprovado para a maioria dos usuários da nossa empresa Fortune 200.

Existe uma solução simples se você deseja usar px para especificar o tamanho da fonte, mas ainda deseja a usabilidade fornecida por eles, colocando isso em seu arquivo CSS:

body {
  font-size: 62.5%;
}

Agora especifique você p(e outras) tags como esta:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

E assim por diante.

Você provavelmente deseja usá-los para tamanhos de fonte até que o IE6 desapareça (do seu site). Px ficará bem quando o zoom da página (em oposição ao zoom de texto) se tornar o comportamento padrão.

O Traingamer já forneceu os links necessários .

Pixel é uma unidade absoluta, enquanto rem / em são unidades relativas. Para mais: https://drafts.csswg.org/css-values-3/

Você deve usar a unidade relativa quando desejar que o tamanho da fonte seja adaptável de acordo com o tamanho da fonte do sistema, porque o sistema fornece o valor do tamanho da fonte ao elemento raiz que é o elemento HTML.

Nesse caso, onde a página da web é aberta no google chrome, o tamanho da fonte do elemento HTML é definido pelo chrome, tente alterá-lo para ver o efeito nas páginas da web com fontes de unidades rem / em.

Se você usar pxcomo unidade para fontes, as fontes não serão redimensionadas, enquanto as fontes com rem/ emunidade serão redimensionadas quando você alterar o tamanho da fonte do sistema.

Portanto, use pxquando desejar que o tamanho seja fixo e use rem/ emquando desejar que o tamanho seja adaptável / dinâmico ao tamanho do sistema.

O consenso geral é usar porcentagens para o tamanho da fonte, porque é mais consistente entre navegadores / plataformas.

É engraçado, eu sempre usei pt para dimensionar fontes e presumi que todos os sites o usassem. Você normalmente não usa tamanhos de px em outros aplicativos (por exemplo, Word). Eu acho que é porque eles são para impressão - mas o tamanho é o mesmo em um navegador da Web e no Word ...

Evite em ou px use rem, pois é mais fácil encontrar o valor calculado. Mas entre em e px, px é melhor porque é difícil depurar.