CSS Unit Converter

Supports conversion between CSS units like px, em, rem, %, vw, vh, providing responsive breakpoint settings. Automatically calculates context-dependent values, suitable for responsive layout development, frontend implementation, and style adaptation.

Usage Instructions

🚀 Quick Start

Enter value and unit: e.g. 16 + px, or 1 + rem
Select the From unit and enter a value, then choose the To unit; use Swap to switch quickly.
Mobile: use the top-right arrow in the drawer to switch between From/To.
Settings are available for rem/em/%/vw/vh; disabled for absolute units.
View results: other units are computed instantly and can be copied
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

🧭 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

What’s the difference between rem and em?

rem is relative to the root font size (predictable global scaling); em is relative to the parent (great for component‑local scaling)

Should I use px or rem?

Prefer rem for layout and text (a11y); px is fine for crisp icons/borders

Why do vw/vh behave differently across devices?

Mobile address bars/safe areas/scrollbars affect the viewport; combine with clamp()/min()/max() and breakpoints

How do I convert screen pixels to print units?

Set DPI (e.g. 96/72/300). Screen→print here is an estimate only; proof with ICC workflows for production