Skip to content
World Cup Kickoff Time Converter is liveSee kickoff times in your time zone and add calendar reminders.
CrateX.app logo

CrateX.app

CSS Unit Converter

Convert CSS units one-to-one between px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex, and ch locally with root font size, parent font size, viewport, DPI, and percent reference settings.

Pixels
px
Tap to switch units

Length Units

Typography

Viewport

Percentage

Relative to root font size
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 rem/em/%/vw/vh context when needed
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 base (Parent Font Size): determines em and % (when reference is Font size). Useful for component‑local scaling: change parent font size to scale the block.
% 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.
DPI (dots per inch): for physical units pt/pc/in/cm/mm/q ↔ px. The default CSS estimate is 96 DPI; custom values are print/device estimates and not the browser's final layout calculation.
Tips: 1) 16px and 96 DPI are common bases; 2) verify layout percentages by switching breakpoints; 3) these controls help design-time estimation and don’t replace the browser’s final DOM/CSS computation.

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 parent font size here; results are not a font metrics inspection and vary across fonts/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
Physical units ↔ px use the configured DPI estimate; print/HiDPI work still requires device or proof validation

Privacy & Security

Processing runs in your browser. The input value, From/To units, per-unit cached values, root font size, parent font size, viewport, DPI, percent 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.

Resources

Guides

About

About Us
Pricing

Legal

Terms
Privacy Policy
Cookie Policy

Preferences

Manage Cookies

All tool processing happens locally in your browser.