Skip to content
CrateX.app logo

CrateX.app

CSS Unit Converter

CSS Unit Converter

CSS unit converter for px, em, rem, %, vw, vh, and pt with responsive breakpoint settings and context-aware calculations for frontend implementation and layout tuning.

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 value and unit: e.g. 16 + px, or 1 + rem
2
Select the From unit and enter a value, then choose the To unit; use Swap to switch quickly.
3
Mobile: use the top-right arrow in the drawer to switch between From/To.
4
Settings are available for rem/em/%/vw/vh; disabled for absolute units.
5
View results: other units are computed instantly and can be copied
6
Breakpoints: switch mobile/tablet/desktop presets to validate conversions on different screens

Common Scenarios

Use cases

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

Extended workflow

px to em, em to px, and vw to px can be handled in the same review flow, so you can verify results before copying or exporting.

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: combine with breakpoints and clamps 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. Default web assumption is 96 DPI; for print/HiDPI set to device value, otherwise treat as approximation.
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 property (width/height/line‑height differ); this tool estimates common cases
ex/ch rely on font metrics; results vary across fonts/browsers
Viewport units vary with scrollbars/address bars/safe areas; expect small discrepancies
Physical units ↔ px vary with DPI; print/HiDPI devices require validation

Privacy & Security

All processing happens in your browser; data never leaves your device

FAQ

4

Continue with these related tools for the next step.