CSS 长度单位换算器
在 px、rem、em、pt、in、cm、mm、vw 和 vh 之间换算，响应式设计与像素级 CSS 的必备工具。
The absolute units
These have a fixed physical size and do not respond to user settings:
| Unit | Ratio | Notes |
|---|---|---|
px | 1/96 inch | The base unit; technically a CSS pixel, not a device pixel |
pt | 1/72 inch | The typographic point, from print |
pc | 12 pt = 1/6 inch | The pica, used in typography |
in | 96 px | Physical inches |
cm | 96/2.54 px | Physical centimetres |
mm | 96/25.4 px | Physical millimetres |
The relative units
These depend on context, which is what makes them good for accessibility:
| Unit | Relative to | Best for |
|---|---|---|
rem | Root font size (usually 16px) | Almost everything — respects user font settings |
em | Parent font size | Padding and margins that should scale with text |
% | Parent dimension | Fluid layouts |
vw / vh | 1% of viewport width/height | Full-screen sections |
ch | Width of the 0 character | Text inputs sized to their content |
Why rem beats px for font sizes
When a user increases their browser's default font size to read more comfortably, px sizes ignore that preference while rem scales with it. This is an accessibility requirement, not a stylistic choice. The recommended pattern is to set html { font-size: 62.5% } so that 1rem equals 10px in the source, then write all other sizes in rem.
When px is still correct
Use px for borders, hairline separators, and anything that should not scale — including box-shadow offsets. For media queries, use em rather than px so they respond to the user's font size.
常见问题
Is 1rem always 16px?
No. It equals the root font size, which is 16px by default but changes if the user adjusts their browser font size, or if the page sets html { font-size: 62.5% }.
Should I use rem or em for font sizes?
rem. It scales with the user's root font size preference, which is an accessibility requirement. em is better for padding and margins that should scale with the text.
When is px still correct?
For borders, hairline separators and shadow offsets — anything that should not scale. For media queries, use em so they respond to the user's font size.
How are vw and vh calculated?
1vw is 1% of the viewport width and 1vh is 1% of the viewport height. The converter assumes a 1920x1080 viewport.
Why did my vw conversion look wrong?
The result depends on the actual viewport, not a fixed number. This tool uses 1920x1080 as the reference, so treat vw and vh as approximations.