A primeira vez que um designer me entregou uma especificação que dizia & quot;body text 16 px, títulos 28 px, letras pequenas 13 px" e o lead front-end dizia & quot; mas enviamos tudo em rem, & quot; Eu fiz a divisão à mão em um aplicativo de calculadora Dezesseis sobre dezesseis é um, vinte e oito sobre dezesseis é um ponto sete cinco, treze sobre dezesseis é zero ponto oito um dois cinco Então o tamanho da fonte base mudou para dez pixels para um & quot;62,5% & quot; configuração em um projeto diferente, e EU fiz tudo de novo Após a terceira vez que EU construí um pequeno conversor no fluxo de trabalho do Toolz.dev, e ele silenciosamente me salvou de erros aritméticos em quase todos os componentes que EU estiliz desde então.
tl;dr: Um conversor de unidade CSS transforma um valor em uma unidade - px, rem, em, pt ou % - no valor equivalente em todas as outras unidades, com base no tamanho da fonte raiz que você controla (16 px por padrão).Para converter px em rem, divida os pixels pelo tamanho da fonte raiz:
24px ÷ 16 = 1.5rem. Para ir para o outro lado, multiplique:1.5rem × 16 = 24px. o conversor de unidade css faz isso instantaneamente para cada unidade de uma só vez, é executado inteiramente em seu navegador e inclui uma tabela de referência px-to-rem que você pode copiar.
Este guia cobre como as unidades se relacionam, por que o tamanho da fonte base é tão importante, quando alcançar cada unidade e a matemática exata que o conversor executa Eu estilizei muitas interfaces em temas WordPress, a UI de administrador WP Adminify e painéis React, e a questão da unidade surge em todos eles As regras são simples quando você vê o número único em que tudo está pendurado.
Por que a conversão px para rem é importante?
Pixels são a unidade quase todas as exportações de ferramentas de design Figma, Sketch e Photoshop pensam em pixels, então uma especificação de transferência é uma lista de valores de pixel Os pixels também são fáceis de raciocinar porque um pixel CSS é um tamanho de referência fixo que não muda quando o usuário ajusta qualquer coisa.
Essa fixidez é exatamente o problema para interfaces acessíveis e responsivas Quando alguém aumenta seu navegador & #39; s tamanho de fonte padrão - uma configuração em que muitas pessoas com baixa visão confiam - texto dimensionado em pixels fixos ignora a mudança completamente Texto dimensionado em escalas rem com ele O mesmo é verdade para zoom do navegador em algumas configurações mais antigas e de folhas de estilo do usuário Se você quiser que sua tipografia respeite as preferências do leitor & #39; s, você dimensiona-o em uma unidade relativa, e rem é aquele que se comporta de forma previsível em uma página inteira.
Então o fluxo de trabalho comum é: design em pixels, ship in rem Isso deixa você fazendo divisão o dia todo, e divisão é onde pequenos erros se arrastam Escrevendo 0.8125rem em vez de 0.875rem para um valor de 13 px é o tipo de erro de digitação que envia para a produção e faz uma etiqueta parecer sutilmente errada Um conversor remove esse risco, que é toda a razão pela qual EU mantenho uma ao alcance Se você trabalhar em muitas dessas tarefas, o mais amplo Kit de ferramentas para desenvolvedores web abrange onde a conversão de unidades se encaixa ao lado de outros trabalhos cotidianos.
Qual é a diferença entre px, rem, em, pt e %?
Cada uma dessas unidades resolve vários pixels CSS em tempo de renderização, um relacionamento Valores e Unidades CSS Nível 4 pinos para baixo: o pixel de referência é definido contra uma tela de 96 dpi, não contra sua tela A diferença é contra o que eles são medidos.
px é o pixel de referência CSS É uma unidade absoluta no sentido de que não depende de qualquer tamanho de fonte. 1px é 1px. Isso o torna previsível, mas também indiferente às preferências do usuário.
rem significa que o & quot; root em." um rem é igual ao tamanho da fonte do elemento raiz - o html elemento. Por padrão, isso é 16 px, então 1rem é 16px, 1.5rem é 24px, e 0.5rem é 8px. Por estar sempre vinculado à raiz, um valor rem significa a mesma coisa em todos os lugares do documento, não importa quão profundamente aninhado o elemento esteja.
em é relativo ao tamanho da fonte do atual elemento. Se um elemento' s tamanho da fonte é 20 px, então 1em dentro dele são 20px, 1.5em é 30 px, e assim por diante A captura é que em compostos: se um pai define font-size: 1.2em e uma criança também se põe 1.2em, o tamanho efetivo de child' s é 1,2 × 1,2 do avô Esta ferramenta assume um elemento dimensionado na base, então em e rem leem o mesmo - e você modela um contexto em específico definindo o tamanho da fonte base para esse elemento' s s s s size.
pt é o ponto, herdado da tipografia de impressão CSS define uma polegada como 96 pixels e 72 pontos, então 1pt é igual a 96/72 (1,333px e 1px é igual a 0,75 pt. Os pontos pertencem às folhas de estilo de impressão; na tela, eles são apenas um múltiplo fixo do pixel de referência.
% para o tamanho da fonte é uma porcentagem do pai (ou, na raiz, da base). 100% é igual ao tamanho de referência e 50% é igual a metade. Em uma base de 16 px, 100% tem 16px e 150% tem 24px.
Veja como os valores comuns se alinham na raiz padrão de 16 px:
| px | rem | em | pt | % |
|---|---|---|---|---|
| 12 | 0,75 | 0,75 | 9 | 75 |
| 14 | 0,875 | 0,875 | 10,5 | 87,5 |
| 16 | 1 | 1 | 12 | 100 |
| 18 | 1.125 | 1.125 | 13,5 | 112,5 |
| 24 | 1.5 | 1.5 | 18 | 150 |
| 32 | 2 | 2 | 24 | 200 |
o conversor de unidade css gera toda esta tabela para qualquer base que você definir, para que você possa usar uma escala de tipos inteira de uma só vez.
Como o tamanho da fonte base muda tudo?
O tamanho da fonte base (root) é o pivô para cada unidade relativa Altere-o e cada conversão rem, em e % muda com ele, enquanto px e pt permanecem onde estão.
O padrão do navegador é 16 px, e é por isso 1rem é normalmente 16px. Mas você pode definir a raiz para qualquer coisa Um padrão popular define html { font-size: 62.5%; }, o que torna a raiz 10px (62,5% de 16). Agora 1rem é limpo 10px& quot; rem math torna - se & quot; mova o ponto decimal & quot;: 1.6 rem é 16 px, 2.4 rem é 24 px, 0.8 rem é 8 px As equipas adoptam isto para que os números nas suas folhas de estilo leiam quase como pixels enquanto ainda escalam com as preferências do utilizador.
Para modelar isso no conversor, defina o tamanho da fonte base para 10 e leia a coluna rem. Um valor de 24 px agora mostra como 2,4 rem em vez de 1,5 rem. É também assim que você raciocina sobre em em um componente que define seu próprio tamanho de fonte: se um cartão definir font-size: 20px, então os valores em dentro dele são relativos a 20, então defina a base como 20 para ver o quê 1.5em resolve.
O erro que vejo com mais frequência é esquecer qual base um valor foi computado contra Alguém converte 24 px para 1,5 rem assumindo uma raiz de 16 px, em seguida, deixa-o cair em um projeto executando o truque de 62,5% onde a raiz é 10 px - e 1,5 rem há 15 px, não 24 px A unidade é relativa, então o número só significa algo uma vez que você conhece a base Sempre que EU colar um valor rem entre projetos, EU verifico o tamanho da fonte raiz primeiro.
Como você converte px para rem e rem para px à mão?
A matemática é uma divisão e uma multiplicação.
px para rem: divida o valor do pixel pelo tamanho da fonte raiz.
rem = px ÷ base
24px ÷ 16 = 1.5rem
13px ÷ 16 = 0.8125rem
10px ÷ 16 = 0.625rem
rem para px: multiplique o valor rem pelo tamanho da fonte raiz.
px = rem × base
1.5rem × 16 = 24px
0.875rem × 16 = 14px
2rem × 16 = 32px
px para em usa a mesma fórmula que rem quando o elemento fica no tamanho da fonte base, então 24px ÷ 16 = 1.5em. A diferença é conceitual, não aritmética: em é medido contra o elemento atual, então se esse elemento & #39; s tamanho difere da raiz, você usa seu tamanho como base.
px para pt: multiplique por 0,75, porque 1px = 0.75pt. por isso 16px × 0.75 = 12pt. Indo para o outro lado, pt × 1.333 = px.
px para %: divida pela base e multiplique por 100. então 24px ÷ 16 × 100 = 150%.
Nada disso é difícil, mas fazê-lo quarenta vezes enquanto estiliza um componente é onde a fadiga produz erros de digitação Esse é precisamente o tipo de tarefa repetitiva e propensa a erros Ferramentas de produtividade do desenvolve a filosofia diz para automatizar - descarregue a aritmética para que sua atenção permaneça no design.
Quando você deve usar cada unidade?
Não existe uma unidade única correta; existe uma unidade certa para cada trabalho.
Use rem para tamanhos de fonte. Esta é a recomendação mais forte na lista Rem escala com o usuário & #39; s browser font-size preference, que é uma verdadeira vitória de acessibilidade, e porque ele está ancorado à raiz não composto inesperadamente A maioria das equipes tamanho todo o seu tipo em rem.
Use rem ou px para espaçamento, dependendo do seu sistema. Muitos sistemas de design expressam margem e preenchimento em rem para que o espaçamento seja dimensionado com o tipo Outros mantêm o espaçamento em px para layouts perfeitos em pixels Ambos são defensáveis; escolha um e seja consistente.
Use em para coisas que devem escalar com seu próprio elemento. Preenchimento em um botão que deve crescer com o botão & #39; s tamanho da fonte é um uso clássico em - definir o preenchimento em em e ele rastreia o texto automaticamente dimensionamento de ícone em relação ao texto adjacente é outro.
Use px para bordas e detalhes finos. um 1px fronteira geralmente deve ficar 1px; você raramente deseja que uma linha de cabelo seja dimensionada com o tamanho da fonte Os pontos de interrupção da consulta de mídia também são frequentemente escritos em px, embora alguns prefiram em lá para comportamento de zoom.
Use pt apenas em folhas de estilo de impressão. Se você está estilizando algo para @media print, pontos são a unidade nativa de impressão e vale a pena usar Na tela, prefira px ou rem.
Use % para larguras de fluido e, ocasionalmente, tamanhos de fonte. A porcentagem está em todo lugar no layout (width: 50%), e como tamanho de fonte às vezes é usado na raiz do truque de 62,5%.
Quais são os erros comuns com as unidades CSS?
O primeiro é o problema de incompatibilidade de base já descrito: converter contra o tamanho errado da fonte root Sempre conheça sua raiz antes de confiar em um número rem.
O segundo é sobre-preciso valores rem. Algumas conversões não dividir uniformemente - 15 px em uma base de 16 px é 0.9375 rem, e 13 px é 0.8125 rem. Esses decimais longos são exatos, mas feio, e arredondando-os muito difícil (digamos para 0.94 rem) desloca o tamanho renderizado por uma fração de um pixel Minha regra: manter três ou quatro decimais para rem, ou escolher valores de base e tamanho que dividem limpo O conversor arredonda sensivelmente e apara zeros à direita assim 24px lê como 1.5rem em vez de 1.5000rem.
O terceiro é composto em Elementos de aninhamento que cada conjunto um em tamanho de fonte multiplica o efeito, de modo que um item profundamente aninhado pode acabar muito maior ou menor do que o pretendido Se você achar em surpreendente, que composição é quase sempre por que - mudar aqueles para rem ea surpresa desaparece.
O quarto está assumindo pt e px são intercambiáveis Eles não são; 12pt é 16px, não 12px. Misturá-los em uma folha de estilo que abrange tela e impressão é um bug sutil.
Como o conversor Toolz.dev lida com a matemática?
Sob o capô o conversor usa uma ideia: expressar cada unidade como um número de pixels, depois converter através de pixels Cada unidade tem um & quot; pixels por unidade & quot; dado o tamanho da fonte base - px é 1, rem e em são a base, pt é 96/72, e% é base/100. para converter, ele multiplica a entrada por sua unidade & #39; s pixels-por-unidade para obter um valor de pixel, depois divide pela unidade alvo & #39; s pixels-por-unidade. Essa única passagem dá cada unidade de uma vez, e é por isso que você vê px, rem, em, pt e % atualizar juntos enquanto você digita.
Ele também analisa valores com unidades anexadas, colando 24px preenche tanto o número quanto a unidade para você Os resultados são arredondados para algumas casas decimais e despojados de zeros à direita para legibilidade, e cada um tem um botão de cópia de um clique que copia o valor com seu sufixo de unidade pronto para colar no CSS Tudo é executado no lado do cliente - nada do que você digita é carregado - o que corresponde ao abordagem privacidade-primeiro por trás de cada ferramenta do site.
Se você também está escolhendo cores ou construindo sombras para o mesmo componente, o Gerador de gradiente CSS e Gerador de sombra de caixa viva a um clique de distância e mais amplo conversor unidade lida com unidades físicas como comprimento e peso quando seu trabalho se afasta do CSS.
Perguntas frequentes
Como converter PX para REM?
Divida o valor do pixel pelo tamanho da fonte raiz. No padrão do navegador de 16px, REM = px ÷ 16, então 16px é 1REM, 24px é 1,5 REM e 8px é 0,5 REM. Insira o valor do pixel no conversor e o equivalente REM aparece instantaneamente em qualquer tamanho de fonte base que você definir.
Como converter REM para PX?
Multiplique o valor REM pelo tamanho da fonte raiz. Em uma base de 16px, px = REM × 16, então 1REM é 16px, 1,5 REM é 24px e 0,75 REM é 12px. Altere o tamanho da fonte base na ferramenta se o elemento HTML usar um valor diferente.
Qual é o tamanho da fonte de raiz padrão?
Os navegadores definem o elemento html como 16 px por padrão, e é por isso que este conversor começa em 16. porque 1 rem sempre é igual ao tamanho da fonte raiz, esse padrão torna 16 px igual a exatamente 1 rem. Os usuários podem alterar seu navegador & #39; s tamanho de texto padrão, que é uma razão rem é preferido para tipografia acessível e escalável.
Qual é a diferença entre REM e EM?
Um rem é sempre relativo ao tamanho da fonte html raiz, por isso permanece consistente em toda a página Um em é relativo ao tamanho da fonte do elemento atual, para que ele possa compor quando elementos aninhados cada um definir seu próprio tamanho Defina o tamanho da fonte base na ferramenta para modelar um contexto em específico.
Como PX e PT se relacionam em CSS?
CSS define um píxeis 96 e pontos 72, então 1 pt é igual a 96/72 (REINSTAL) 1,333 px, e 1 px é igual a 0,75 pt. Os pontos vêm da tipografia de impressão; na tela eles são um múltiplo fixo do pixel de referência CSS Use px ou rem para trabalho de tela e reserve pt para folhas de estilo de impressão.
O que faz o truque do tamanho da fonte de 62,5%?
Definir o tamanho da fonte html para 62,5% torna o tamanho da fonte raiz 10 px, então 1 rem se torna um conveniente 10 px e matemática rem se transforma em mover o decimal - 1,6 rem é 16 px, 2,4 rem é 24 px. Para modelar isso no conversor, defina o tamanho da fonte base para 10 e leia a coluna rem.
Devo usar PX ou REM para tamanhos de fonte?
Rem é geralmente preferido para tamanhos de fonte porque é dimensionado com o usuário & #39; s preferência de tamanho de fonte do navegador, o que melhora a acessibilidade, enquanto o px fixo não. Muitas equipes projetam em px e convertem em rem para o CSS final. Detalhes de layout, como bordas, geralmente permanecem em px.
Por que o valor convertido às vezes tem decimais longos?
Algumas conversões não são exatas - 15 px em uma base de 16 px é 0,9375 rem, e os valores de pt geralmente produzem decimais repetidos A ferramenta arredonda para algumas casas decimais e apara zeros à direita para legibilidade Para layouts perfeitos em pixels, arredonde os valores rem para dois ou três decimais ou escolha uma base que divida seus tamanhos de forma limpa.
