Por que a conversão de rem depende do tamanho da fonte base?

rem é relativo ao tamanho da fonte do elemento raiz. Altere o campo de tamanho da fonte base para corresponder ao seu CSS :root ou font-size do html.

Qual é a diferença entre % e pontos percentuais?

em é relativo ao tamanho da fonte do elemento pai, enquanto rem é sempre relativo ao tamanho da fonte raiz. Esta ferramenta usa o tamanho da fonte base para ambos como ponto de referência.

Como o tempo de leitura é calculado?

1 vw é igual a 1% da largura do viewport e 1 vh é igual a 1% da altura do viewport. Ajuste os campos de dimensões do viewport para corresponder à sua tela alvo.

pt é o mesmo que px?

Não — 1 pt é igual a 1/72 de uma polegada (aproximadamente 1,333 px a 96 dpi). Os pontos são usados principalmente em folhas de estilo de impressão.

Conversor de unidades

Sobre esta ferramenta

Insira um valor em qualquer unidade CSS e veja imediatamente seu equivalente em todas as outras unidades. Configure o tamanho da fonte base, largura do viewport e altura do viewport para que as conversões correspondam ao seu projeto real. Uma tabela de referência útil de pontos de interrupção responsivos comuns em todas as unidades está incluída na parte inferior.

Como usar

1 Etapa 1: Defina seu tamanho de fonte base (padrão 16 px), largura do viewport e altura do viewport na parte superior.
2 Etapa 2: Insira um valor em qualquer campo de unidade — todos os outros campos são atualizados instantaneamente.
3 Etapa 3: Leia a tabela de conversão para encontrar o equivalente na unidade que você precisa.
4 Etapa 4: Role para baixo até a referência de pontos de interrupção para valores de design responsivo comumente usados.

Why CSS has so many length units

CSS measures distance in two broad families. Absolute units map to a fixed physical or device measure: px, pt, in, cm, and mm. Relative units scale against something else: rem and em scale with font size, while %, vw, and vh scale with the containing box or the viewport. Modern responsive design leans heavily on relative units so a layout adapts to the user's text-size preference and screen, but you still need to reason in pixels constantly. This converter bridges the two: you type a value in any unit and instantly see every other unit, all computed live in your browser.

The conversion math, made explicit

Everything in CSS ultimately resolves to the reference pixel, where the web's anchor is 96px = 1 inch. From that single fact the absolute units fall out:

Unit	Definition	1 unit in px
px	The CSS reference pixel	1
in	96 px per inch	96
cm	2.54 cm per inch	~37.8
mm	25.4 mm per inch	~3.78
pt	72 points per inch	~1.333

The relative units depend on the settings you control at the top of the tool. rem and em are computed against the base font size (default 16px), so 1rem = 16px. The viewport units depend on the viewport width and height you enter: 1vw is 1% of the viewport width and 1vh is 1% of its height. The tool also treats % as a share of the viewport width, which matches how a top-level percentage width behaves.

A worked example

Leave the base font size at 16px and the viewport width at 1920px, then type 24 into the px row. The tool fills in the rest at once: 24px = 1.5rem (24 ÷ 16), = 18pt (24 × 72 ÷ 96), = 0.25in (24 ÷ 96), and = 1.25vw (24 ÷ 1920 × 100). Change the base font size to 20px and the same 24px now reads 1.2rem — a vivid demonstration that rem is not a fixed length but a ratio to whatever the root font size happens to be. The breakpoint table at the bottom applies this same conversion across common device widths (320, 375, 768, 1024, 1440, 1920, 2560), so you can read any breakpoint in every unit at a glance.

Practical tips for real stylesheets

Use rem for type and spacing. Sizing fonts, padding, and margins in rem means the whole layout scales when a user bumps their browser's default font size for readability. Pixel values ignore that preference.
Know the em trap. Unlike rem, which is always relative to the root, em is relative to the current element's font size and compounds when nested. This tool computes em against your base value, which matches the common case but not a deeply nested one.
Reach for pt only in print. Points are a typesetting unit; use them in print stylesheets, not on screen, where px and rem are the native vocabulary.
Treat vw/vh as viewport-relative, not element-relative. A value in vw ignores the parent container entirely — it is always a slice of the whole window, which is great for hero sections and dangerous for components inside narrow columns.

Common mistakes

Assuming 1pt = 1px. They are close but not equal: 1pt ≈ 1.333px. Copying point values from a print design straight into CSS pixels makes everything render about a third too small.
Hard-coding viewport math. A value that is "10vw" looks fine on a 1440px laptop (144px) but balloons on a 2560px display (256px). Use the breakpoint table to sanity-check how a viewport unit behaves across screens before committing.
Forgetting the device pixel ratio. CSS pixels are not the same as the hardware pixels on a high-DPI screen. The 96px-per-inch rule is the CSS reference; the browser scales it to the physical display. This converter works in CSS pixels, which is what your stylesheet actually controls.
Mixing absolute and relative units carelessly. Setting a font in px but its line-height in rem couples two things you probably meant to keep independent. Pick a unit per purpose and stay consistent.

Because the converter is pure arithmetic running on your device, it works offline and never sends your values anywhere — handy when you are deep in a layout problem and just need the numbers to line up.