单位换算

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:

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.