Converta PX em REM e REM em PX instantaneamente com tamanhos de fonte base personalizados. Gere clamp() fluido CSS, classes Tailwind e tabelas de conversão.
Converta PX para REM e REM para PX instantaneamente com base raiz personalizada. Gere tipografia fluida com CSS clamp(), classes Tailwind e tabelas de conversão.
Comprimento exato nas coordenadas de tela em pixels de referência CSS (1px = 1/96 de polegada). Usado como âncora de mockup no Figma, Sketch ou Adobe XD antes da conversão relativa.
O font-size computado do elemento raiz <html> do documento. O padrão W3C define 16px como valor inicial em navegadores desktop e móveis, estabelecendo 1.000rem = 16px.
Comprimento proporcional calculado pela divisão dos pixels alvo pela base raiz. Escala dinamicamente com o zoom do navegador e configurações de acessibilidade de ampliação de texto do SO.
Intervalo de largura de tela (geralmente 375px mobile a 1440px desktop) no qual a tipografia fluida escala proporcionalmente antes de travar nos limites mínimo e máximo da função clamp.
Quantidade de dígitos fracionários retidos na string rem convertida. 4 casas decimais (ex.: 0,0625rem para 1px na base 16px) garantem zero corte por arredondamento de subpixels em telas de alta densidade (high-DPI).
Token correspondente de espaçamento ou font-size do Tailwind CSS v3/v4 equivalente ao valor rem computado, calculado sobre incrementos padrão do Tailwind de 0,25rem (4px).
Definir font-size em pixels (ex.: font-size: 16px) sobrescreve o tamanho de fonte configurado por usuários com baixa visão nas preferências do navegador. Navegadores modernos respeitam a escala do usuário apenas quando o texto é declarado em unidades rem ou em. Quando um usuário com deficiência visual aumenta a fonte padrão de 16px para 24px, layouts em rem expandem proporcionalmente, enquanto tipografias travadas em px permanecem estáticas no tamanho fixado no design, violando o Critério de Sucesso 1.4.4 da WCAG 2.1 (Redimensionar Texto).
Muitos desenvolvedores definem html { font-size: 62.5% } para que 1rem equivalha convenientemente a 10px (16px * 0,625 = 10px). No entanto, bibliotecas de componentes de terceiros (como Radix, Shadcn ou plugins Tailwind) calibram seus tokens de espaçamento presumindo uma raiz de 16px. Usar o reset de 62,5% encolherá componentes não adaptados para 62,5% do tamanho planejado, causando colapso de preenchimentos (padding), botões de ícone desalinhados e fragmentação no design system em arquiteturas de micro-frontends.
Enquanto 1rem sempre equivale ao tamanho da raiz do documento independentemente da profundidade do DOM, 1em reflete o font-size do elemento pai imediato. Se você aninhar três listas não ordenadas com font-size: 0.875em, o primeiro nível renderiza a 14px (16 * 0,875), o segundo cai para 12,25px (14 * 0,875) e o terceiro encolhe para 10,7px (12,25 * 0,875). Reserve em estritamente para paddings e bordas internas de componentes que devem escalar proporcionalmente quando a fonte daquele componente específico mudar.
Converter uma borda de 1px para 0.0625rem (1 / 16) faz com que os motores de renderização calculem frações de pixels em telas com proporções não inteiras de densidade (como 1,25x ou 2,75x no Android). Em determinados níveis de zoom do viewport, 0.0625rem é arredondado para 0 pixels físicos, fazendo divisores de tabela e contornos de botões desaparecerem por completo. Mantenha bordas finas (hairline) e microseparadores declarados explicitamente em 1px (ou border-width: 1px) em vez de convertê-los para rem.
Isso acontece quando a largura mínima do viewport é configurada com valor maior que a máxima, ou quando o tamanho mínimo de fonte excede o tamanho máximo. Entradas invertidas produzem uma inclinação negativa ((minFont - maxFont) / deltaVw), fazendo com que o texto encolha à medida que a tela aumenta. Para corrigir, aplique validação estrita garantindo que minViewport < maxViewport e minFontSize <= maxFontSize antes de calcular a equação de interpolação linear.
A especificação W3C CSS Media Queries Level 4 estabelece que unidades relativas em media queries (@media (min-width: 40rem)) sempre se resolvem contra o tamanho de fonte inicial padrão do navegador (16px), ignorando qualquer font-size customizado declarado no elemento html (como 62.5% ou 10px). Um @media (min-width: 40rem) sempre disparará em 640px (40 * 16px), jamais em 400px (40 * 10px). Calcule valores rem de media queries baseando-se estritamente no padrão de 16px.
Declarar classes arbitrárias no Tailwind como text-[0.9375rem] (15px) ou h-[2.1875rem] (35px) pode produzir discrepâncias de arredondamento de 0,5px entre Chromium (Blink) e Safari (WebKit), gerando frestas de 1px em contêineres flex. Resolva isso utilizando a escala padrão em incrementos de 4px do Tailwind (ex.: text-sm para 14px ou text-base para 16px) ou aplicando box-sizing: border-box junto com flex-shrink: 0 nas bordas dos contêineres.
Para converter pixels (PX) para REM em CSS, divida o valor em pixels pelo tamanho da fonte raiz (que é 16px por padrão em todos os navegadores modernos): REM = PX / BasePX. Por exemplo, 24px divididos por 16px equivalem a 1.5rem (24 / 16 = 1,5). Inversamente, para converter REM para PX, multiplique o valor em REM pela base: PX = REM * BasePX (1.5rem * 16 = 24px).
16px equivalem a exatamente 1.000rem no padrão W3C de tamanho de fonte raiz dos navegadores (16px). Como 16 dividido por 16 é igual a 1, 1rem representa a linha de base para tipografia de corpo de texto, elementos de parágrafo e campos de formulário padrão no desenvolvimento web moderno.
Você deve usar REM em vez de PX porque o REM respeita as configurações de acessibilidade do usuário: quando pessoas com baixa visão aumentam o tamanho padrão da fonte no navegador, toda a tipografia e espaçamentos baseados em REM escalam proporcionalmente, preservando a integridade da interface. Em contrapartida, valores fixos em PX travam o texto em um tamanho estático, violando a diretriz WCAG 1.4.4 e resultando em textos truncados ou ilegíveis.
Para calcular o CSS clamp(), determine o tamanho mínimo de fonte (ex.: 16px em tela de 375px) e o tamanho máximo (ex.: 24px em tela de 1440px). A inclinação linear (slope) é (24 - 16) / (1440 - 375) = 8 / 1065 ≈ 0,007512. O intercepto y é -375 * 0,007512 + 16 ≈ 13,183px (0,8239rem). O valor ideal intermediário é 0.8239rem + 0.7512vw, resultando na regra de produção: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem).
A diferença entre REM e EM está no ponto de referência: o REM (Root EM) é sempre relativo ao font-size do elemento raiz <html> (padrão de 16px), enquanto o EM é relativo ao font-size do seu elemento pai imediato. Unidades EM aninhadas se multiplicam em cascata pela árvore DOM (por exemplo, 0.8em dentro de 0.8em vira 0.64em), ao passo que os valores em REM permanecem completamente previsíveis e estáveis em qualquer nível de aninhamento de componentes.
Converter uma borda de 1px em 0.0625rem causa problemas de arredondamento de subpixels em telas móveis com proporções de pixels de dispositivo (DPR) não inteiras (como 2.625x). Em diversos ciclos de renderização do WebKit mobile, 0.0625rem é arredondado para 0 pixels físicos, fazendo contornos de botões e divisores de cartões sumirem. Para bordas ultrafinas (hairlines) e divisores, mantenha-os sempre definidos explicitamente em 1px em vez de REM.
Verifique códigos de status HTTP, teste cadeias de redirecionamento e inspecione headers de resposta. Diagnostique erros 1xx a 5xx, normas RFC, impacto em SEO e correções.
Teste, depure e otimize expressões regulares em tempo real. Inspecione correspondências, grupos de captura, nós sintáticos e regras de substituição.
Calcule máscaras de sub-rede IPv4, intervalos CIDR, hosts utilizáveis e broadcast. Inclui inspeção binária bit a bit, planejamento VLSM e regras de VPC em nuvem.
Calcule adição e subtração binária com transporte passo a passo (carry bits), complemento de dois, portas lógicas e conversão hexadecimal em tempo real.
Teste e valide a sintaxe do robots.txt conforme a RFC 9309. Verifique permissões de rastreamento por user-agent, depure caminhos de disallow e inspecione sitemaps no navegador com validação instantânea.
Converta Markdown para HTML limpo e pronto para produção em tempo real. Com tabelas GFM, realce de sintaxe, proteção XSS, cópia Rich Text e exportação.