CSS unit converter
Reference and convert CSS units — px, em, rem, %, vw, vh, vmin, vmax, ch, ex, lh, rlh, cm, mm, in, pt, pc, q, deg, rad, turn, s, ms, dpi, dpcm, dppx and fr — using your root and parent font sizes, with every context-dependent result flagged.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Convert
Conversion context
em and % need the parent font size, rem and rlh the root font size, vw / vh the viewport size, ch / ex the font metrics and lh the line height. Conversions between absolute units (px, in, cm, mm, q, pt, pc) do not depend on any of it.
Result
| Unit | Value | Note |
|---|---|---|
| px | 16 | Context independent |
| in | 0.166667 | Context independent |
| cm | 0.423333 | Context independent |
| mm | 4.233333 | Context independent |
| q | 16.933333 | Context independent |
| pt | 12 | Context independent |
| pc | 1 | Context independent |
| em | 0.8 | Context dependent |
| rem | 1 | Context dependent |
| % | 80 | Context dependent |
| vw | 1.25 | Context dependent |
| vh | 2.222222 | Context dependent |
| vmin | 2.222222 | Context dependent |
| vmax | 1.25 | Context dependent |
| ch | 1.6 | Context dependent |
| ex | 1.6 | Context dependent |
| lh | 0.533333 | Context dependent |
| rlh | 0.666667 | Context dependent |
Unit reference
| Unit | Dimension | Note | Depends on |
|---|---|---|---|
| px | Length | Pixel · The CSS pixel: the spec fixes 1in = 96px, which anchors every other length conversion. | Nothing (absolute unit) |
| in | Length | Inch · 1in = 96px = 2.54cm. | Nothing (absolute unit) |
| cm | Length | Centimetre · 1cm = 96/2.54px ≈ 37.7953px. | Nothing (absolute unit) |
| mm | Length | Millimetre · 1mm = 1/10cm ≈ 3.7795px. | Nothing (absolute unit) |
| q | Length | Quarter-millimetre · 1Q = 1/40cm ≈ 0.9449px, mostly used in print-oriented CSS. | Nothing (absolute unit) |
| pt | Length | Point · 1pt = 1/72in = 96/72px ≈ 1.3333px; on screen it is unrelated to printer points. | Nothing (absolute unit) |
| pc | Length | Pica · 1pc = 12pt = 16px. | Nothing (absolute unit) |
| em | Length | Relative to parent font size · 1em is the inherited font-size of the element. On font-size it is relative to the parent, on margin to the element itself — which is why em compounds. | Parent font size |
| rem | Length | Relative to root font size · 1rem is the font-size of the root element (html), 16px by default, and never compounds through the tree. | Root font size |
| % | Length | Percentage · A percentage resolves against the parent’s same property: font-size against the parent font size, width against the parent width — so 50% means different things per property. | Parent font size |
| vw | Length | 1% of viewport width · 1vw = viewport width ÷ 100, and it changes when a scrollbar appears. | Viewport size |
| vh | Length | 1% of viewport height · 1vh = viewport height ÷ 100; on mobile the toolbar changes that height while scrolling — see the viewport units tool. | Viewport size |
| vmin | Length | 1% of the smaller viewport side · 1vmin = min(viewport width, height) ÷ 100, which stays stable across orientation changes. | Viewport size |
| vmax | Length | 1% of the larger viewport side · 1vmax = max(viewport width, height) ÷ 100. | Viewport size |
| ch | Length | Width of the “0” glyph · 1ch is the advance width of “0” in the current font, handy for limiting line length; it depends on the font and is often approximated as half the font size. | Font metrics (advance width / x-height) |
| ex | Length | x-height · 1ex is the font’s x-height, usually about half the font size and very font-dependent. | Font metrics (advance width / x-height) |
| lh | Length | Current line height · 1lh equals the element’s computed line-height, which makes line-aligned spacing trivial. | Line height |
| rlh | Length | Root line height · 1rlh equals the root element’s line-height and ignores the current element. | Root font size, Line height |
| deg | Angle | Degree · A full circle is 360deg; the most common angle in transforms and gradients. | Nothing (absolute unit) |
| rad | Angle | Radian · A full circle is 2π rad ≈ 6.2832rad, so 1rad = 180/π deg ≈ 57.2958deg. | Nothing (absolute unit) |
| turn | Angle | Turn · 1turn = 360deg, the clearest way to write a full rotation. | Nothing (absolute unit) |
| s | Time | Second · 1s = 1000ms, the default unit for transitions and animations. | Nothing (absolute unit) |
| ms | Time | Millisecond · 1ms = 0.001s. | Nothing (absolute unit) |
| dpi | Resolution | Dots per inch · 1dpi = 1/2.54 dpcm and 1dppx = 96dpi; prefer dppx in media queries. | Nothing (absolute unit) |
| dpcm | Resolution | Dots per centimetre · 1dpcm = 2.54/96 dppx ≈ 0.0265dppx. | Nothing (absolute unit) |
| dppx | Resolution | Dots per pixel · The device pixel ratio: 1dppx = 96dpi, and Retina displays are usually 2dppx. | Nothing (absolute unit) |
| fr | Flexible fraction | Fraction of free grid space · fr only exists inside grid track sizing, where it splits the free space proportionally; it cannot be converted to any length. | Nothing (absolute unit) |
What this tool does
- Convert the px values from a design file into rem / em: set the root and parent font sizes and read off 16px = 1rem or 16px = 0.8em (parent 20px).
- Work out the vw value before writing fluid type: with a 1280px viewport, 16px is 1.25vw — no mental arithmetic on percentages.
- Check what a unit actually means: how wide is ch, when do ex and lh help, how many px is 1Q, how do dpcm and dppx relate — the reference lists the dependencies.
- Debug “why does the text keep growing when nested”: em and % compound against the parent, and the tool flags exactly which results depend on the parent font size.
Example
Input
Value 16, from px, to rem, with a 16px root size, a 20px parent font size and a 1280 × 720 viewport
Output
16px = 1rem (depends on the root size); the same value is 0.8em (parent font size), 80% (% of the parent), 1.25vw (viewport width) and 0.423333cm (context independent)
px and cm are both absolute lengths, so that conversion has no context dependency and is flagged as context independent.
Frequently asked questions
Why is every result flagged as context dependent?
Only the absolute lengths (px, in, cm, mm, q, pt, pc) have fixed values. em depends on the parent font size, rem on the root font size, % on the parent’s same property, vw / vh on the viewport, ch / ex on font metrics and lh / rlh on line heights. The same 2em is a different number of pixels in a different context, so the dependencies are listed alongside the value.
What is the difference between em and rem?
rem only ever looks at the root element (html), so it never compounds. em looks at the current element’s font size, and because font sizes are often declared relative to their parent, em values multiply through the tree. Use rem for spacing and radii that must stay stable, and em when the value should scale with the text, such as aligning an icon with its label.
Are pt, cm and in real physical sizes on screen?
No. CSS fixes 1in = 96px, so pt, cm and mm are just CSS pixels derived from that ratio; they do not correspond to printed lengths. For print output use @page with mm and let the browser map them to the device.
Why can fr not be converted?
fr means “one share of the leftover space” and only exists inside grid track sizing. Its pixel value depends on how much space the other tracks in the same grid-template consume, so outside a layout it has no defined length — the tool refuses to convert it.
Which viewport size should I enter?
The layout viewport you actually see while debugging, scrollbar included — 1vw is one percent of it. Remember that on mobile the address bar changes the viewport height as you scroll, which changes the pixel value of vh; svh, lvh and dvh exist to solve exactly that.
Keywords：css unitspx to rempx to emvw vhunit convertercss 单位单位换算px 转 remem 换算视口单位前端工具换算