CSS UNITS
CSS unit converter, px rem em in a flash.
Convert instantly between px, rem, em, pt and %, set root size and viewport width, and get a reference table. Handy for frontend slicing and responsive layout. Runs locally.
Reference table (root 16px)
10px = 0.625rem
12px = 0.750rem
14px = 0.875rem
16px = 1.000rem
18px = 1.125rem
20px = 1.250rem
24px = 1.500rem
32px = 2.000rem
40px = 2.500rem
48px = 3.000rem
How are units converted?
rem is relative to the root size (default 16px), em to the current size (estimated from root here), pt is a print point (1px = 0.75pt), and % in width is relative to the viewport (1vw = viewport/100). Change any value above and results update live.
示例与注意事项Example & notes
一个例子A worked example
设计稿 375px 宽、按钮宽 88px：根字号 16px 时等于 23.4375rem，页面同时给出 vw 与百分比换算。A design at 375 px with an 88 px button equals 23.4375 rem at a 16 px root; vw and percentage values are given too.
注意事项Things to watch
- rem 随根字号变化、vw 随视口变化，移动端适配常用 vw 或 clamp。rem follows the root font size, vw follows the viewport — mobile layouts usually want vw or clamp.
- 百分比是相对父元素而不是视口，误用会导致宽度意外。Percentages are relative to the parent, not the viewport, which surprises people.
- 换算只解决起点，断点处仍需人工微调。Conversion gives a starting point; breakpoints still need manual tuning.
- 1rem 等于根元素字号而不是父元素字号，改动 html 字号会影响全站，调优前先锁定根字号。1 rem tracks the root font size rather than the parent, so changing it shifts the whole site — lock it before tuning.
相关问答More Q&A
该选 rem 还是 vw？rem or vw — which one?
需要跟随用户字号缩放用 rem；需要严格按设计比例铺满用 vw。Use rem when text must respect user font settings, vw when the layout must scale with the viewport.
支持小程序 rpx 吗？Does it support rpx?
支持，按 750 设计稿的换算规则给出 rpx 值。Yes — rpx values follow the standard 750-unit design width.