Por que em vez de px?


766

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?


Para o que vale, aqui está a definição para as diferentes unidades no CSS: w3.org/TR/css3-values/#lengths .
21713 Ryan

Respostas:


554

É 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.


27
Não há como converter entre ems e pixels, a menos que você saiba qual o tamanho de um 'em' em pixels, nesse contexto. Isso pode depender do tamanho da fonte herdada desse elemento, que por sua vez pode depender do tamanho da fonte do documento como um todo, que pode depender das configurações de tamanho da fonte no navegador do usuário e / ou sistema operacional. Se você deseja um tamanho de pixel específico, especifique-o em pixels. Ou seja, se você quer 990px, coloque 990px. Se pixels é o que você deseja, por que não usá-los?
#

7
Hã? Eu não disse nada que contradisse isso. Eu estava dizendo para que unidades de px são usadas e para quais unidades em. Você parece sugerir que o uso de unidades de px geralmente é ruim. Se um site quebra quando você ajusta o tamanho da fonte padrão do navegador, a falha não é em unidades de px, é uma suposição ruim. Claramente, o web designer confiou no tamanho da fonte padrão (geralmente uma boa ideia) e, no entanto, criou o restante do layout com base em suposições falsas sobre esse tamanho de fonte, como tentar alinhar elementos gráficos de tamanho fixo com o texto, onde o tamanho do elemento corresponde apenas ao texto em um tamanho de fonte.
thomasrutter

3
Não está errado, nem simplificado demais. Obviamente, se você os usar em uma linha em que realmente declara o tamanho da fonte, é impossível que eles nessa linha sejam relativos ao tamanho da fonte do mesmo elemento após qualquer declaração de tamanho da fonte nesse elemento, porque ele ganhou ' ainda não sabemos - portanto, ele deve ser relativo ao tamanho da fonte que o elemento teria antes que a propriedade tamanho da fonte no mesmo elemento seja declarada. Como qualquer outro comportamento é literalmente impossível, não vejo nenhuma ambiguidade por lá.
precisa saber é o seguinte

3
@TalhaSayed, você está confundindo pixels com a unidade de px. Eles não são a mesma coisa - leia as especificações CSS. A unidade px é uma unidade absoluta no mesmo sentido que a unidade in, ou a unidade cm, ou a unidade pt.
thomasrutter

7
@thomasrutter, UAU! Eu apenas pesquisei por isso e sim, tenho que dizer que estava errado. Todos esses anos e eu não fazia ideia. Eu costumava pensar que 1 pixel = 1 "ponto na tela". Acho que aprendi algo novo hoje.
Talha disse

143

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:

Captura de tela do Firefox com zoom de 120% do texto

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.


15
Você também pode ampliar o texto no Firefox sem ampliar as imagens em Exibir -> Zoom -> Somente zoom em texto e, em seguida, aplicar o zoom normalmente.
thomasrutter

4
+1 ponto bom. embora em relação a grandes resoluções, você pode definir a configuração de tela para mostrar o texto a 120 dpi em vez da resolução padrão 96
Spoike

5
@ Spike: Gostaria, mas o Firefox não respeita a configuração de DPI do sistema. Veja bugs.launchpad.net/ubuntu/+source/firefox/+bug/19524
flodin

6
@ Juan: Isso porque eles usam o método mais simples de zoom: dimensionar a página inteira. Mas isso significa que, com um zoom de 150%, uma página com 1000 pixels de largura se torna com 1500 pixels de largura. É a maneira mais fácil de ampliar para desenvolvedores de web e navegador. Infelizmente, não é muito fácil de usar. É por isso que outros navegadores têm zoom de texto que amplia o conteúdo apenas sem alterar o layout. Mas isso significa que os desenvolvedores da Web precisam basicamente projetar seus layouts para uma ampla variedade de tamanhos de fonte, limitando bastante o que você pode fazer em termos de design. É muito difícil fazer com que um site tenha uma boa aparência tanto na fonte 16pt quanto na fonte 48pt.
Lèse majesté

1
@Lesemajeste não está dimensionando a página inteira como deveria ser o "zoom". Não chega um momento em que o desenvolvedor deve dizer aos usuários de nichos para lidar ou não visitar? Eu nunca criaria uma única página considerando as fontes 16pt e 48pt. Isso é simplesmente estúpido e, como você apontou, muito limitado no layout. Eu acho ótimo que o FF queira fazer um zoom especial apenas para texto, mas não vou projetar com isso em mente.
1934286 31/01

93

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.


1
Estou pensando: como isso se ajusta aos sistemas de grade usando porcentagens de largura? Será quebrado se o bloco contianing tiver uma largura de 100%?
Hugo der hungrige

64
Isso não é verdade hoje em dia. Pressionar Ctrl+e Ctrl-em qualquer navegador moderno também redimensionará os valores de pixel. Tem sido assim por um tempo agora.
YemSalat

1
@YemSalat Isso também vale para o ajuste de DPI no sistema operacional?
angularsen

@anjdreas nenhuma idéia para ser honesto.
YemSalat

4
@spoike, downvoting isso, pois não é claramente mais verdade como afirma YemSalat'scomment
RayLoveless

60

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.)


4
> Para ter uma idéia da aparência de um px, imagine um monitor de computador CRT da década de 1990: o menor ponto que ele pode exibir mede cerca de 1/100 de polegada (0,25 mm) ou um pouco mais. A unidade de px recebeu o nome desses pixels da tela. - Citação do W3C: w3.org/Style/Examples/007/units.en.html#units
Jay Zelenkov

4
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 é na verdade uma polegada física quando se fala em mídia baseada em tela) . Não acho que a resposta mais votada seja sobre polegada física. As relações estão entre os diferentes esquemas de dimensionamento absoluto, como in e pt. Por exemplo. Apenas estendendo sua 'prova' se eu desenhar uma linha de 1_in_ ela medirá 1 polegada fisicamente?
Saumitra R. Bhave

5
-1 para discurso incorreto e irrelevante. pxé dimensionado em relação a um pixel de referência , não aos pixels nas telas em que você está aqui. Você pode não gostar disso, mas tirar a régua não tornará isso menos um fato, nem contribui para responder à pergunta. stackoverflow.com/questions/27382331/… "The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees."
underscore_d

52

É ú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.


97
Atualmente, todos os navegadores modernos implementam o zoom dimensionando todas as unidades absolutas igualmente, em vez de dimensionar apenas o tamanho da fonte. Observe que esta resposta foi escrita em 2009, quando esse era menos o caso do que é agora.
precisa saber é o seguinte

22

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.

Eu estava apenas procurando uma fórmula de cálculo :-) talvez fosse bom adicionar um exemplo inverso, como 2pxé 0.125empara uma fonte de 16 pixels.
Wolf

12

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


3
Seria melhor adicionar uma imagem que ilustra o efeito.
Wolf

8

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í.


1
Observe que o IE7 e o IE8 ainda não podem redimensionar o texto com um tamanho de fonte especificado em pixels (a Page > Text Size). No entanto, o IE7 adicionou o zoom da página ( Page > Zoom), que amplia a página inteira, incluindo o texto, obviamente.
Mercator

1
Melhor que Page> Zoon, tente pressionar as teclas [CTRL] + [-] ou [+] no teclado no IE7 +, Chrome e Firefox - zoom de página inteira sem a maioria dos problemas encontrados ao tentar alterar o tamanho da fonte.
Rich Turner

1
Quase nenhum computador no mundo usa o IE6 em 2017 #
Michael

3
@MichaelMay Daí por que a resposta e outros comentários foram escritos em 2009 ... lol
Chev

7

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


é, mas não corresponde aos Requisitos Mínimos das WCAG 2.0: w3.org/WAI/WCAG20/quickref/Overview.php - Técnicas Suficientes para 1.4.4
meo

2

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.


1
+1 grades de fluido era realmente o que eu estava procurando quando fiz a pergunta. (também, não deve sua empresa ser a atualização para o IE7?)
Spoike

Se você me perguntou, eles deveriam usar o Firefox, mas na verdade não me perguntam. :-) (IE7 seria melhor do que 6, mas não estou a par do de tomada de decisão)
Traingamer

2

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.


2
Isso não depende muito de ninguém tocar nas configurações de CSS personalizadas do navegador?
Spoike

4
Sim, você deve apenas definir font-size: 10px. css-tricks.com/forums/discussion/1230/...
m33lky

Eu prefiro deixar font-size: 100% e uso mixins para trabalhar fora o valor em
gunnx

0

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 .


0

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.

insira a descrição da imagem aqui

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.


-1

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 ...


-2

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.


Por favor, adicione mais explicações à sua resposta para que outras pessoas possam aprender com ela - especialmente porque essa é uma pergunta muito antiga, que já tem várias respostas aprovadas
Nico Haase
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.