Devo usar unidades de valor px ou rem no meu CSS? [fechadas]

375

Estou criando um novo site e quero que ele seja compatível com o máximo possível de navegadores e configurações do navegador. Estou tentando decidir qual unidade de medida devo usar para o tamanho das minhas fontes e elementos, mas não consigo encontrar uma resposta conclusiva.

Minha pergunta é: devo usar pxou remno meu CSS?

  • Até agora eu sei que o uso pxnão é compatível com usuários que ajustam o tamanho da fonte base no navegador.
  • Eu desconsiderei ems porque eles são mais difíceis de manter, em comparação com rems, à medida que se conectam em cascata.
  • Alguns dizem que rems são independentes da resolução e, portanto, mais desejáveis. Mas outros dizem que a maioria dos navegadores modernos amplia todos os elementos da mesma forma, portanto, o uso pxnão é um problema.

Estou perguntando isso porque há muitas opiniões diferentes sobre qual é a medida de distância mais desejável em CSS, e não tenho certeza qual é a melhor.

html css distance units-of-measurement TylerH
fonte
4
É uma questão de disputa, argumentação e opinião, não o tipo de questões técnicas em que SO é bom. A propósito, a resposta correta é "Não". J
Jukka K. Korpela
2
Até o comentário está desatualizado. Só porque o OP pede a opinião certa, não significa que apenas daremos nossa própria opinião. Quase 8 anos depois, essa pergunta mostra que ainda há interesse em como o assunto evolui. As respostas atuais são suficientemente substanciais e técnicas e NÃO opinativas. Portanto, sugiro editar a palavra "opinião" para "experimentar", para que não caiamos nessa armadilha de reabrir e fechar a questão repetidamente.
Tim Vermaelen 16/04
2
@ TimVermaelen, esta pergunta foi encerrada apenas uma vez na vida. A mudança feita não foi substantiva, pois a resposta ainda depende inteiramente do contexto que não pode ser fornecido, a menos que o OP edite a pergunta para perguntar sobre um cenário específico. Não há opção "melhor" para todos os casos, portanto, essa questão é baseada em opiniões.
TylerH 16/04

Respostas:

418

TL; DR: uso px.

Os fatos

  • Primeiro, é extremamente importante saber que, por especificação , a pxunidade CSS não é igual a um pixel de exibição físico. Isso sempre foi verdade - mesmo na especificação CSS 1 de 1996 .

    O CSS define o pixel de referência , que mede o tamanho de um pixel em uma tela de 96 dpi. Em uma tela com um dpi substancialmente diferente de 96 dpi (como telas Retina), o agente do usuário redimensiona a pxunidade para que seu tamanho corresponda ao tamanho de um pixel de referência. Em outras palavras, esse redimensionamento é exatamente o motivo pelo qual 1 pixel CSS é igual a 2 pixels físicos da tela Retina.

    Dito isto, até 2010 (e não obstante a situação do zoom móvel), o pxquase sempre era igual a um pixel físico, porque todos os monitores amplamente disponíveis estavam em torno de 96dpi.

  • Os tamanhos especificados em ems são relativos ao elemento pai . Isso leva ao em"problema de composição" no qual elementos aninhados ficam progressivamente maiores ou menores. Por exemplo:

    body { font-size:20px; } 
div { font-size:0.5em; }

    Nos dá:

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • O CSS3 rem, que sempre é relativo apenas ao htmlelemento raiz , agora é suportado em 96% de todos os navegadores em uso .

A opinião

Acho que todos concordam que é bom projetar suas páginas para acomodar a todos e considerar os deficientes visuais. Uma dessas considerações (mas não a única!) É permitir que os usuários aumentem o texto do seu site, para facilitar a leitura.

No começo, a única maneira de fornecer aos usuários uma maneira de dimensionar o tamanho do texto era usando unidades de tamanho relativo (como ems). Isso ocorre porque o menu de tamanho da fonte do navegador simplesmente mudou o tamanho da fonte raiz. Portanto, se você especificasse o tamanho da fonte px, eles não seriam redimensionados ao alterar a opção de tamanho da fonte do navegador.

Navegadores modernos (e até o IE7 não tão moderno) alteraram o método de dimensionamento padrão para simplesmente ampliar tudo, incluindo imagens e tamanhos de caixa. Essencialmente, eles tornam o pixel de referência maior ou menor.

Sim, alguém ainda poderia mudar seu estilo padrão do navegador para ajustar o tamanho da fonte padrão (o equivalente à opção de tamanho de fonte de estilo antigo), mas isso é uma maneira muito esotérico de fazer isso e eu aposto ninguém 1 faz. (No Chrome, ele está oculto nas configurações avançadas, conteúdo da Web, tamanhos de fonte. No IE9, é ainda mais oculto. Você precisa pressionar Alt e ir para Exibir, Tamanho do texto.) É muito mais fácil selecionar a opção Zoom em o menu principal do navegador (ou use Ctrl+ +/ -/ roda do mouse).

1 - dentro de erro estatístico, naturalmente

Se assumirmos que a maioria dos usuários dimensiona páginas usando a opção de zoom, considero as unidades relativas principalmente irrelevantes. É muito mais fácil desenvolver sua página quando tudo é especificado na mesma unidade (as imagens são tratadas em pixels) e você não precisa se preocupar com composição. ( "Disseram-me que não haveria matemática" - é preciso calcular o que o 1,5em realmente funciona.)

Um outro problema em potencial de usar apenas unidades relativas para tamanhos de fonte é que fontes redimensionadas pelo usuário podem quebrar as suposições feitas pelo seu layout. Por exemplo, isso pode fazer com que o texto seja cortado ou executado por muito tempo. Se você usar unidades absolutas, não precisará se preocupar com tamanhos de fonte inesperados para quebrar seu layout.

Então, minha resposta é usar unidades de pixel. Eu uso pxpara tudo. Obviamente, sua situação pode variar e, se você precisar dar suporte ao IE6 (que os deuses dos RFCs tenham piedade de você), terá que usar ems de qualquer maneira.

josh3736
fonte
43
Você deve usar pixels e rem. Portanto, os navegadores mais novos recebem rem e os navegadores antigos voltam aos pixels (como o WordPress 2012). Isso pode ser automatizado com Sass ou Less, então tudo o que você faz é inserir o valor px e ele gera automaticamente px e rem.
21412 cchiera
63
Minha grande dúvida sobre esse argumento é que, ao ajustar o tamanho e o espaçamento da fonte em pontos de interrupção responsivos, você pode definir um novo tamanho de fonte no elemento html e todas as medições definidas no rem se ajustam automaticamente, enquanto no px você precisará escrever novas regras para cada medida que você deseja ajustar. É claro que provavelmente serão necessários mais ajustes, mesmo ao usar o rem, mas com um planejamento inteligente, você obtém uma enorme quantidade de escala proporcional gratuitamente. Amarrar determinadas medidas de espaçamento de caixa ao tipo, código mais leve e menos complexidade / mais capacidade de manutenção é uma vitória clara para mim.
RobW
16
Supondo que nenhum usuário altere a configuração do tamanho da fonte é bastante ousado. Essa alegação deve ser apoiada com dados. Caso contrário, é apenas uma maneira de alienar alguns dos usuários que já são frágeis (pessoas com deficiência visual). Se puder, use rem em vez de px. Na IMO, os aplicativos devem poder escalar independentemente sua interface e o tamanho da fonte. "Basta usar px" é o que muitos desenvolvedores que enfrentam problemas com o ems desejam ouvir, mas não é a resposta certa para a web.
Olivvv
18
Seria ótimo ter um acompanhamento sobre isso. Rem está agora com 95% + suporte.
Estatísticas de aprendizado por exemplo,
10
Errado, eu não ligo para o IE (ninguém deveria).
Vahid Amiri
194

Gostaria de elogiar a resposta de josh3736 por fornecer um excelente contexto histórico. Embora seja bem articulado, o cenário do CSS mudou nos quase cinco anos desde que essa pergunta foi feita. Quando essa pergunta foi feita, px foi a resposta correta, mas isso não é mais verdade hoje.

tl; dr: userem

Visão geral da unidade

Historicamente, as pxunidades geralmente representavam um pixel do dispositivo. Com dispositivos com densidade de pixels cada vez maior, isso não vale mais para muitos dispositivos, como o Retina Display da Apple.

remunidades representam a r oot em tamanho. É o que font-sizequer que seja :root. No caso do HTML, é o <html>elemento; para SVG, é o <svg>elemento O padrão font-sizeem todos os navegadores * é 16px.

No momento da redação deste artigo, remé suportado por aproximadamente 98% dos usuários . Se você estiver preocupado com esses outros 2%, lembrarei que as consultas de mídia também são suportadas por aproximadamente 98% dos usuários .

Sobre o uso px

A maioria dos exemplos de CSS na Internet usa pxvalores porque eles eram o padrão de fato. pt, ine várias outras unidades poderiam ter sido usadas na teoria, mas elas não lidavam bem com valores pequenos, pois você rapidamente precisava recorrer a frações, que eram mais longas para digitar e mais difíceis de raciocinar.

Se você queria uma borda fina, com a qual pxvocê poderia usar 1px, ptprecisaria usar 0.75ptpara obter resultados consistentes, e isso não é muito conveniente.

Sobre o uso rem

remO valor padrão de 16pxnão é um argumento muito forte para seu uso. Escrever 0.0625remé pior do que escrever 0.75pt, então por que alguém usaria rem?

Há duas partes em remvantagem sobre outras unidades.

  • As preferências do usuário são respeitadas
  • Você pode alterar o pxvalor aparente rempara o que quiser

Respeitando as preferências do usuário

O zoom do navegador mudou muito ao longo dos anos. Historicamente, muitos navegadores apenas aumentavam de tamanho font-size, mas isso mudou muito rapidamente quando os sites perceberam que seus belos designs perfeitos em pixels estavam quebrando sempre que alguém aumentava ou diminuía o zoom. Nesse ponto, os navegadores escalam a página inteira, para que o zoom baseado em fonte fique fora de cena.

Respeitar os desejos de um usuário não está fora de cena. Só porque um navegador está definido como 16pxpadrão, não significa que nenhum usuário possa alterar suas preferências 24pxou 32pxcorrigir uma visão subnormal ou baixa visibilidade (brilho da tela). Se você basear suas unidades rem, qualquer usuário com tamanho de fonte mais alto verá um site proporcionalmente maior. As bordas serão maiores, o preenchimento será maior, as margens serão maiores, tudo aumentará fluidamente.

Se você basear suas consultas de mídia rem, também poderá garantir que o site que seus usuários visualizem se encaixa na tela deles. Um usuário font-sizedefinido como 32pxem um 640pxnavegador amplo, efetivamente verá seu site como mostrado a um usuário 16pxem um 320pxnavegador amplo. Não há absolutamente nenhuma perda para o RWD no uso rem.

Alteração do pxvalor aparente

Porque remé baseado no font-sizedo :rootnó, se você quiser mudar o que 1remrepresenta, tudo que você tem a fazer é mudar o font-size:

:root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Expandir snippet

Faça o que fizer, não defina o :rootelemento de font-sizeum pxvalor.

Se você definir o font-sizesobre htmla um pxvalor, você desintegradas as preferências do usuário sem uma maneira de recuperá-los.

Se você deseja alterar o valor aparente de rem, use %unidades.

A matemática para isso é razoavelmente direta.

O tamanho aparente da fonte de :rooté 16px, mas digamos que queremos alterá-lo para 20px. Tudo o que precisamos fazer é multiplicar 16por algum valor para obter 20.

Configure sua equação:

16 * X = 20

E resolva para X:

X = 20 / 16
X = 1.25
X = 125%


:root {
  font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
Expandir snippet

Fazer tudo em múltiplos de 20não é tão bom assim, mas uma sugestão comum é tornar o tamanho aparente remigual a 10px. O número mágico para isso é 10/16qual é 0.625, ou 62.5%.

:root {
  font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Expandir snippet

O problema agora é que o padrão font-sizepara o resto da página é conjunto muito pequeno, mas há uma correção simples para isso: Definir um font-sizeem bodyusar rem:

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}
<p>I'm the default font-size</p>
Expandir snippet

É importante observar que, com esse ajuste, o valor aparente de remé o 10pxque significa que qualquer valor no qual você possa ter escrito pxpode ser convertido diretamente ao reminserir uma casa decimal.

padding: 20px;

torna-se em

padding: 2rem;

O tamanho aparente da fonte que você escolher depende de você; portanto, se você quiser, não há motivo para não usá-lo:

:root {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

e tem 1remigual 1px.

Então, aí está, uma solução simples para respeitar os desejos do usuário, evitando também complicar demais o seu CSS.

Espere, então qual é o problema?

Eu tinha medo que você pudesse perguntar isso. Por mais que eu queira fingir que remé mágico e resolve tudo, ainda existem alguns problemas a serem observados. Nada de acordo na minha opinião , mas vou chamá-los para que você não possa dizer que não avisei.

Consultas de mídia (uso em)

Um dos primeiros problemas com os quais você se depara remenvolve consultas de mídia. Considere o seguinte código:

:root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

Aqui, o valor das remalterações depende da aplicação da consulta à mídia, e a consulta à mídia depende do valor de rem, então o que está acontecendo?

remnas consultas de mídia, usa o valor inicial de font-sizee não deve (consulte a seção Safari) levar em consideração as alterações que possam ter ocorrido font-sizeno :rootelemento. Em outras palavras, seu valor aparente é sempre 16px .

Isso é um pouco chato, porque significa que você precisa fazer alguns cálculos fracionários, mas eu descobri que as consultas de mídia mais comuns já usam valores múltiplos de 16.

|   px | rem |
+------+-----+
|  320 |  20 |
|  480 |  30 |
|  768 |  48 |
| 1024 |  64 |
| 1200 |  75 |
| 1600 | 100 |

Além disso, se você estiver usando um pré-processador CSS, poderá usar mixins ou variáveis ​​para gerenciar suas consultas de mídia, o que ocultará completamente o problema.

Safári

Infelizmente, existe um bug conhecido no Safari, em que alterações no :roottamanho da fonte realmente alteram os remvalores calculados para os intervalos de consulta de mídia. Isso pode causar um comportamento muito estranho se o tamanho da fonte do :rootelemento for alterado em uma consulta de mídia. Felizmente, a correção é simples: use emunidades para consultas de mídia .

Troca de Contexto

Se você alternar entre vários projetos diferentes, é bem possível que o tamanho aparente da fonte remtenha valores diferentes. Em um projeto, você pode estar usando um tamanho aparente de 10pxonde, em outro projeto, o tamanho aparente pode estar 1px. Isso pode ser confuso e causar problemas.

Minha única recomendação aqui é manter 62.5%a conversão rempara um tamanho aparente de 10px, porque isso tem sido mais comum em minha experiência.

Bibliotecas CSS compartilhadas

Se você estiver escrevendo CSS que será usado em um site que você não controla, como para um widget incorporado, não há realmente uma boa maneira de saber qual tamanho aparente remterá. Se for esse o caso, fique à vontade para continuar usando px.

Se você ainda deseja usar rem, considere liberar uma versão Sass ou LESS da folha de estilo com uma variável para substituir a escala pelo tamanho aparente de rem.

* Não quero assustar ninguém rem, mas não pude confirmar oficialmente que todos os navegadores usam 16pxpor padrão. Veja bem, existem muitos navegadores e não seria tão difícil para um navegador divergir um pouco, digamos 15pxou assim 18px. Nos testes, no entanto, eu não vi um único exemplo em que um navegador usando configurações padrão em um sistema usando configurações padrão tivesse outro valor além de 16px. Se você encontrar um exemplo, compartilhe comigo.

zzzzBov
fonte
Eu sei que isso é tarde, mas, eu gosto do jeito que usa o REM, mas o meu problema é usar rem quando eu uso matrix()com javascript, que é o valor de conversão da matriz que está usando px(corrija-me se estiver errado) e estou tão confuso com isso .
Ampersanda
3
@Ampersanda, em JavaScript, você usa amplamente os valores de pixels computados. Minha recomendação é alternar as classes sempre que possível, para que o CSS possa gerenciar a aparência das coisas. Para algumas coisas, você não poderá evitar o uso de JS para calcular valores de pixel, portanto, sua melhor aposta é calcular o valor de pixel a partir do estado DOM.
ZzzzBov
Entendo, preciso, getComputedStyle()mas o resultado está sempre no pixel, então tenho que dividir o resultado pelo remvalor (como 16). CMIIW
Ampersanda,
@Ampersanda apenas se você estiver realmente gerando um remvalor, se já tiver o pxvalor correto , não há necessidade de mudar para remunidades para itens que já são computados para o contexto especificado.
ZzzzBov
11
tem 1rem igual 1px Isso faz com que problemas devido ao mínimo font-size do Chrome: stackoverflow.com/questions/44378664/... stackoverflow.com/questions/24200797/...
Paul
44

Este artigo descreve muito bem os prós e contras de px, eme rem.

O autor finalmente conclui que o melhor método é provavelmente usar ambos pxe rem, declarando pxprimeiro para navegadores mais antigos e declarando novamente rempara navegadores mais novos:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
uzyn
fonte
11
Sim, é o que me interessou no rem em primeiro lugar. Duas coisas que eu não entendo: ele o aconselha apenas como uma unidade de medida para fontes (não elementos), e se eu o entendi corretamente, a única razão real para usá-las é para que os usuários do IE possam redimensionar o texto?
11
@ Samuel Eu acredito que sim. Se não fosse para redimensionar o texto, acredito que preferiríamos usá-lo px. Quanto à unidade de elementos, a aderência pxseria melhor, pois normalmente você deseja dimensionar os elementos com precisão.
Uzyn
Mas se você fizer isso, qualquer configuração do navegador que redefina o tamanho da fonte base estragaria seu layout, certo? Por que não rem para tudo?
11
Como muitos comentários observam aqui isso, a razão pela qual precisamos nos livrar pxé permitir o redimensionamento. Agora, se usarmos rem, ainda precisamos fornecer pxfallback (em navegadores mais antigos). Essencialmente, o que isso significa é pxredimensionar o suporte rem. Navegadores mais novos suportam o pxredimensionamento e, para navegadores mais antigos, de qualquer maneira que vamos usar o recurso px. Agora, com base nessa conclusão, estou muito interessado em saber, por que usar rem? Se eu posso ver a luz no fim do túnel.
Fusionstrings
3
Não há garantia de que valores como 62,5% = 10px. Isso só é válido quando o tamanho da fonte padrão do navegador foi definido como 16px. Embora esse seja o padrão, não é garantido.
Cimmanon
7

Como resposta reflexa, eu recomendaria o uso de rem, pois permite alterar o "nível de zoom" de todo o documento de uma só vez, se necessário. Em alguns casos, quando você quiser que o tamanho seja relativo ao elemento pai, use em.

Mas o suporte rem é irregular, o IE8 precisa de um polyfill e o Webkit está exibindo um bug. Além disso, o cálculo de subpixels pode fazer com que coisas como linhas de um pixel às vezes desapareçam. O remédio é codificar em pixels para elementos muito pequenos. Isso introduz ainda mais complexidade.

Portanto, no geral, pergunte a si mesmo se vale a pena - quão importante e provável é que você altere o "nível de zoom" de todo o documento no CSS?

Em alguns casos, é sim; em alguns casos, será não.

Portanto, isso depende de suas necessidades e você deve ponderar prós e contras, porque o uso de rem e em introduz algumas considerações adicionais em comparação com o fluxo de trabalho "normal" baseado em pixel.

Lembre-se de que é fácil alternar (ou melhor converter) seu CSS de px para rem (JavaScript é outra história), porque os dois blocos seguintes de código CSS produziriam o mesmo resultado:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}
html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}
Rolf
fonte
6

Sim, o REM e o PX são relativos, mas outras respostas sugeriram o REM sobre o PX. Também gostaria de fazer backup usando um exemplo de acessibilidade.
Quando o usuário define um tamanho de fonte diferente no navegador, o REM automaticamente aumenta e diminui elementos como fontes, imagens etc. na página da Web, o que não é o caso do PX.

No gif abaixo, o texto do lado esquerdo é definido usando o tamanho da fonte da unidade REM, enquanto a fonte do lado direito é definida pela unidade PX.

insira a descrição da imagem aqui

Como você pode ver, o REM está aumentando / diminuindo automaticamente quando redimensiono o tamanho da fonte padrão da página da Web. (Lado inferior direito)

O tamanho da fonte padrão de uma página da web é 16px, que é igual a 1 rem (somente para a página html padrão html{font-size:100%}, por exemplo), portanto, 1,25rem é igual a 20px.

PS: quem mais está usando o REM? Frameworks CSS! como o Bootstrap 4, o Bulma CSS etc., então é melhor se dar bem com isso.

JerryGoyal
fonte
3

A resposta de josh3736 é boa, mas para fornecer um contraponto três anos depois:

Eu recomendo usar remunidades para fontes, mesmo que isso facilite a alteração do tamanho para você , desenvolvedor. É verdade que os usuários raramente alteram o tamanho da fonte padrão em seus navegadores e que o zoom moderno do navegador aumenta as pxunidades. Mas e se o seu chefe vier até você e disser "não amplie as imagens ou os ícones, mas aumente todas as fontes". É muito mais fácil alterar o tamanho da fonte raiz e deixar que todas as outras fontes sejam dimensionadas em relação a isso, e depois alterar os pxtamanhos em dezenas ou centenas de regras de CSS.

Acho que ainda faz sentido usar pxunidades para algumas imagens ou para certos elementos de layout que sempre devem ter o mesmo tamanho, independentemente da escala do design.

O Caniuse.com pode ter dito que apenas 75% dos navegadores quando josh3736 postaram sua resposta em 2012, mas em 27 de março eles reivindicam suporte a 93,78% . Somente o IE8 não o suporta entre os navegadores que eles rastreiam.

Joshua Carmody
fonte
11
Only IE8 doesn't support it among the browsers they track.Hã? A página vinculada afirma que “IE9 e IE10 não suportam unidades rem quando usadas na propriedade abreviada de fonte ou quando usadas em pseudo-elementos. IE9, 10 e 11 não suportam unidades rem quando usadas na propriedade altura da linha quando usadas em pseudo-elementos antes e depois. As bordas com tamanho real desaparecem quando a página é reduzida no Chrome. Não funciona no navegador Samsung Note II Android 4.3 e no Samsung Galaxy Tab 2 no Android 4.2. O Chrome 31-34 e o Android baseado no Chrome (como 4.4) têm um erro no tamanho da fonte quando o elemento raiz tem tamanho percentual. ”
e-sushi
Além disso, relacionado ao seu. as of March 27 they claim 93.78% support.No momento da redação deste comentário, o caniuse mostra apenas 91,79% do suporte total ao navegador. Olhando para a sua porcentagem, tenho certeza de que você também incluiu o suporte ao navegador de buggy (atualmente em 2,8%, o que poderia ser interpretado como uma cobertura geral otimista de 94,6% - mas o fato é que esses 2,8% vêm com buggy, incompleto ou mesmo completamente não apoio ... como mencionado no meu comentário anterior: cada bug sendo o resultado de diferente versão do navegador e operando combinações de sistema) Você pode querer corrigir a sua resposta em conformidade ....
e-sushi
1

Eu descobri que a melhor maneira de programar os tamanhos de fonte de um site é definir um tamanho de fonte base para bodye depois usar em's (ou rem's) para todos os outros font-sizeque declaro depois disso. Essa é uma preferência pessoal, suponho, mas me serviu bem e também facilitou a incorporação de um design mais responsivo .

Quanto ao uso de unidades rem, acho bom encontrar um equilíbrio entre ser progressivo no seu código, mas também oferecer suporte para navegadores mais antigos. Confira este link sobre o suporte ao navegador para unidades rem , que deve ajudar bastante na sua decisão.

cereallarceny
fonte
Está bem. Mas o design responsivo é tão facilmente feito com as unidades de px corretas (basta escrever suas consultas de mídia com base em px em vez de em)?
No entanto, você pode diminuir o tamanho da fonte, à medida que a largura da janela de exibição do site se torna menor, e pode alterar o bodytamanho da fonte e tudo muda com ela.
cereallarceny
Não estou realmente preocupado com o suporte ao navegador. Incluirei apenas um tamanho de px de fallback para todos os tamanhos, para que navegadores mais antigos tenham algo a interpretar.
Em seguida, vá para o caminho progressivo usando rem. Contanto que você faça uma reserva, não vejo mal algum. Para mim, embora pareça trabalho extra, mas talvez não na sua situação.
precisa saber é o seguinte
0

pté semelhante rem, na medida em que é relativamente fixo, mas quase sempre independente de DPI, mesmo quando navegadores não compatíveis tratam pxde maneira dependente do dispositivo. remvaria de acordo com o tamanho da fonte do elemento raiz, mas você pode usar algo como Sass / Compass para fazer isso automaticamente pt.

Se você tivesse isso:

html {
    font-size: 12pt;
}

então 1remsempre seria 12pt. reme emsão tão independentes de dispositivos quanto os elementos em que se baseiam; alguns navegadores não se comportam de acordo com as especificações e tratam pxliteralmente. Mesmo nos velhos tempos da Web, 1 ponto era consistentemente considerado como 1/72 de polegada - ou seja, existem 72 pontos em uma polegada.

Se você possui um navegador antigo não compatível e possui:

html {
    font-size: 16px;
}

então 1remvai depender do dispositivo. Para elementos que herdariam de htmlpor padrão, 1emtambém seriam dependentes do dispositivo. 12ptseria o equivalente independente do dispositivo garantidamente garantido :,16px / 96px * 72pt = 12pt where 96px = 72pt = 1in.

Pode ser bastante complicado fazer as contas se você quiser se ater a unidades específicas. Por exemplo,, .75em of html = .75rem = 9pte .66em of .75em of html = .5rem = 6pt. Uma boa regra de ouro:

  • Use ptpara tamanhos absolutos. Se você realmente precisa que isso seja dinâmico em relação ao elemento raiz, você está solicitando muito CSS; você precisa de uma linguagem que seja compilada para CSS, como Sass / SCSS.
  • Use empara tamanhos relativos. É bastante útil poder dizer: "Quero que a margem esquerda tenha a largura máxima de uma letra" ou "Torne o texto desse elemento um pouco maior que o ambiente". <h1>é um bom elemento para usar um tamanho de fonte no ems, pois pode aparecer em vários lugares, mas sempre deve ser maior que o texto próximo. Dessa forma, você não precisa ter um tamanho de fonte separado para cada classe aplicada h1: o tamanho da fonte se adaptará automaticamente.
  • Use pxpara tamanhos muito pequenos. Em tamanhos muito pequenos, ptpode ficar embaçada em alguns navegadores em 96 DPI, uma vez pte pxnão bastante alinhar. Se você deseja apenas criar uma borda fina de um pixel, diga-o. Se você tiver uma tela de alto DPI, isso não será óbvio para você durante o teste, portanto, teste-a em uma tela genérica de 96 DPI em algum momento.
  • Não lide com subpixels para deixar as coisas mais atraentes em telas de alto DPI. Alguns navegadores podem suportá-lo - principalmente em telas de alto DPI - mas é um não-não. A maioria dos usuários prefere grande e clara, embora a Web tenha nos ensinado desenvolvedores de outra forma. Se você deseja adicionar detalhes estendidos para seus usuários com telas de última geração, pode usar gráficos vetoriais (leia-se: SVG), o que você deve fazer de qualquer maneira.
Zenexer
fonte
11
pt é para mídia impressa e nunca deve ser usada para telas
sf
O @sf CSS define pt e px de modo que eles sempre tenham a mesma proporção, apesar de não ser o uso tecnicamente preciso desses termos (72pt = 96px = 1in). De fato, em CSS, px não é realmente um pixel de dispositivo único. Na minha tela, 1px é 2 pixels do dispositivo. A vantagem de usar pt sobre px é que você pode especificar facilmente os tamanhos dos elementos em relação aos tamanhos relacionados ao texto.
Zenexer 5/01
-2

Metade (mas apenas metade) da resposta sarcástica (a outra metade é um desdém amargo da realidade da burocracia):

Use vh

Tudo é sempre dimensionado para a janela do navegador.

Sempre permita rolar para baixo, nunca para o lado.

Defina a largura do corpo como 50vh estático e nada flutua ou interrompe a div principal. E estilize apenas usando tabelas para que tudo seja mantido rigidamente no lugar, conforme o esperado. Inclua uma função javascript para desfazer qualquer atividade ctrl +/- que o usuário possa fazer.

Todo mundo vai te odiar, exceto as pessoas que dizem para você fazer as coisas combinarem com a sua maquete, e elas ficam em êxtase. E todo mundo sabe que sua opinião é a única que importa.

liljoshu
fonte
-3

Sim. Ou melhor, não.

Quer dizer, isso não importa. Use o que faz sentido para o seu projeto em particular. PX e EM ou ambos igualmente válidos, mas se comportarão um pouco diferente, dependendo da arquitetura CSS da página em geral.

ATUALIZAR:

Para esclarecer, afirmo que geralmente não importa qual você use. Às vezes, você pode querer escolher um especificamente sobre o outro. Os EMs são bons se você pode começar do zero e quiser usar um tamanho de fonte base e tornar tudo relativo a isso.

Os PXs geralmente são necessários quando você está adaptando uma reformulação em uma base de código existente e precisa da especificidade de px para evitar problemas de aninhamento incorretos.

DA.
fonte
Então sua resposta é que isso não importa? Ou há certas situações em que você valorizaria uma sobre a outra? E se sim, em que situações esse seria o caso?
@ Samuel sim, pode haver momentos em que você queira usar um ou outro. Atualizei minha resposta com mais informações.
DA.
Desculpe, fiquei um pouco confuso com o texto original. Acha que você tinha REM no título e EM no corpo. Parece que você está perguntando especificamente sobre o REM. A resposta ainda é praticamente a mesma, mas o REM tem alguns benefícios adicionais a serem considerados, mas é usado principalmente da mesma forma que o EM - permite que você use um tamanho de fonte 'base'.
DA.
Por que " eles são bons [...] se você pode começar do zero e deseja usar um tamanho de fonte base e tornar tudo relativo a isso. "? Qual é a vantagem de (r) em's sobre px? É para que os usuários do IE possam redimensionar o texto ou existem outras vantagens sobre o px (o que parece ser mais simples)?
EM e REM têm o mesmo benefício: você pode definir o HTML ou BODY para um tamanho de fonte específico (por exemplo, 10 px) e, em seguida, definir tudo como EM ou REM. Dessa forma, se você deseja aumentar proporcionalmente todo o tipo, basta alterar o estilo inicial de 10 px para 11 px. Isso foi muito mais útil 5 anos atrás, quando todos estávamos construindo nossos próprios widgets de redimensionamento de fontes baseados em JS personalizados. Hoje em dia, os navegadores fazem um trabalho tão melhor no zoom (especialmente em dispositivos móveis) que acho muito menos benéfico. Se você acha o PX mais simples, esse é um benefício para você e certamente um motivo válido para o PX.
DA.
-4

os são o caminho a seguir, não apenas para fontes, mas você pode usá-los com caixas, espessura de linha e outras coisas também, por que?

Simplificando, os em são os únicos que são escalonados em uníssono com as teclas alt + e alt- no navegador para aplicar zoom.

Outras medidas são dimensionadas, mas não tão limpas quanto um em.

Em uma nota lateral, se você quiser o melhor em escala, também converta seus gráficos em SVG com base em vetor sempre que possível, pois eles também serão redimensionados com a taxa de zoom do navegador.

shawty
fonte
3
Atualmente, a maioria dos navegadores amplia todos os elementos da página igualmente (a menos que você ajuste o tamanho da fonte base), para que a vantagem de usar (r) em não seja verdadeira para navegadores modernos, certo?
É e não é, enquanto você está correto no que diz, é mais sobre o fator de escala, em oposição ao delta de escala. O delta sempre será uniforme, independentemente da medição usada, mas o fator de escala (desde que as matemáticas sejam feitas corretamente) será ajustado conforme necessário, por exemplo, um monitor widescreen versus um monitor padrão ou pixels retangulares ou pixels quadrados. Porque rems são realmente baseado em uma verdadeira medição de impressoras, em seguida, escalar sempre será um ajuste melhor, outros (como%) são muitas vezes a melhor um offset delta
shawty
(cont) com a multiplicação aplicada em ambas as direções e, como resultado, pode, em alguns casos, gerar uma taxa de visualização bastante desproporcional.
quer
2
"Simplificando, os em são os únicos que são escalonados em uníssono com as teclas alt + e alt- no navegador para aplicar zoom." = isso está incorreto.
DA.
Ok, para que eu pudesse ter escrito melhor, veja meu comentário anterior para a correção.
shawty
-5

Os EMs são a única coisa que pode ser dimensionada para consultas de mídia que lidam com +/- escala, o que as pessoas fazem o tempo todo, não apenas as cegas. Aqui está outra demonstração profissional muito bem escrita de por que isso importa.

A propósito, é por isso que o Zurb Foundation usa o ems , enquanto o Bootstrap 3 inferior ainda usa pixels.

robmuh
fonte
2
Isso não está realmente correto. Antigamente, os pixels não podiam ser ampliados nas versões antigas do IE. +/- agora faz um zoom de página inteira em todos os navegadores atuais; portanto, isso não é um problema. Além disso, esta pergunta é sobre rems em vez de px - não em vs px.
Ricos Bradshaw
11
Vocês me fazem rir. Você já tentou escalar seu site usando +/- usando pixels? A gravação sobre pixels a ser ampliada está totalmente errada. Vote em mim o quanto quiser. Os votos não mudam a realidade.
robmuh
11
Talvez estejamos considerando coisas um pouco diferentes - alguma chance de você fazer uma demonstração simples para demonstrar a diferença?
Ricos Bradshaw
Eu não acho que a questão é sobre o que unidades para usar em consultas de mídia ...
binki