PocketPlay
中文
CSS Unit Converter
Convert px to rem, em, pt, %, vw and vh with your own root size and viewport, plus a clamp() fluid-type generator.
Reference values
Convert
Type in any field — the rest update instantly.
Common sizes
px → rem reference table
| px | rem | em | pt |
|---|
clamp() fluid type
Generated CSS
Fluid type scales smoothly between the two viewport widths.
How to use the CSS unit converter
- Set your root font size (16px unless you changed it), the parent font size used by
emand%, and your reference viewport. - Type a number into any unit field — px, rem, em, pt, %, vw, vh and the absolute units all convert at once.
- Scroll to the clamp() generator to turn a minimum and maximum size into one fluid line of CSS.
FAQ
Why is 1rem not always 16px?
rem is relative to the <html> font size. It is 16px by default, but a user who raises their browser's default text size — or a stylesheet that sets html { font-size: 62.5% } — changes it. That is exactly why rem is the accessible choice for type.
What is the difference between em and rem?
em is relative to the font size of the element itself (or its parent for the font-size property), so it compounds when nested. rem always points at the root, so it never compounds.
Is clamp() safe for accessibility?
Yes, as long as the preferred value contains a relative unit such as rem rather than being pure vw. The generator always mixes a rem offset with the vw slope, so text still responds to the user's font-size setting.