Skip to content
CrateX.app logo

CrateX.app

CSS Unit Converter

Convert CSS units one-to-one between px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm, q, ex, and ch locally using root font size, EM reference font size, viewport, and percentage reference settings. Absolute CSS units use the fixed ratio 1in = 96px.

px
Tap to switch units

Length Units

Typography

Viewport

Percentage

rem
Tap to switch units

Length Units

Typography

Viewport

Percentage

CSS Unit Converter

Quick Start

1
Enter a value and choose the From unit
2
Choose the To unit or use Swap to reverse
3
Set root, EM reference, percentage, and viewport context as needed; use the font size actually used by the property for EM.
4
Copy the converted result
5
Switch viewport presets for vw/vh checks

Common Scenarios

Use cases

responsive layouts, design‑to‑dev handoff, cross‑density/print correlation, unified style conventions

Usage Advice

Set a base: 16px root is common, making rem ↔ px mental math easy
Prefer rem for text: enables global scaling and a11y; use em for component‑local scaling
Use viewport units for layout estimates: combine with breakpoints and min/max constraints to avoid extremes
Decimals & rounding: keep reasonable precision to avoid unreadable numbers

Parameters & Context

REM base (Root Font Size): determines rem ↔ px conversion. 16px is common on the web, making mental math easy (1rem≈16px). Adjust temporarily when a design isn’t based on 16px.
EM reference font size: enter the font size actually used by the property. em usually uses the current element’s computed font size; for font-size and similar font-relative properties, use the parent font size. This reference is also used for ex/ch approximations and for % when Font size is selected.
% reference: choose Font size / Width / Height as the reference. For layout use Width/Height; for typography (e.g. line-height) use Font size.
Breakpoint presets: Mobile / Tablet / Desktop / Large also set viewport size for quick estimation across widths. This is for estimation only, not a runtime media query.
Viewport size: used for vw/vh/vmin/vmax and % (when reference is width/height). Real devices may differ due to address bars, safe areas, and scrollbars.
Tips: 1) 16px is a common root and EM reference, but use the font size actually used by the property; 2) verify layout percentages by switching breakpoints; 3) these controls support design-time estimates and do not replace the browser’s final DOM/CSS computation. Absolute units always use 1in = 96px.

Limitations & Compatibility

% reference depends on the CSS property, containing block, and layout mode; this tool uses the chosen font-size/viewport width/viewport height reference for estimation, not a live parent/container measurement
ex/ch are approximations based on the EM reference font size here; results are not a font-metrics inspection and vary across fonts and browsers.
Classic vw/vh/vmin/vmax vary with scrollbars/address bars/safe areas; this tool does not calculate dvh/svh/lvh, vi/vb, safe-area, or container query units
CSS absolute-unit conversions use the fixed ratio 1in = 96px. Relating physical screen pixels to printed size requires a separate device/print workflow, which this tool does not provide.

Privacy & Security

Processing runs in your browser. The input value, From/To units, per-unit cached values, root font size, EM reference font size, viewport, percentage reference, and breakpoint choice may stay in the current browser session or browser storage. If you save a workspace or enable WebDAV sync, those values may be saved according to your sync settings. Converted results are recalculated from the current value, units, and context settings, and are not stored as separate results. This page does not fetch URLs or send values for server-side conversion. On shared devices, clear values, settings, and site data when needed.

FAQ

4

Continue with these related tools for the next step.

About

About Us
Pricing

Legal

Terms
Privacy Policy
Cookie Policy

Preferences

Manage Cookies

All tool processing happens locally in your browser.