CSS Units Reference

CSS length units reference with real-time conversion, visual comparison.

Absolute Units

Unit	Name	Description	Conversion
px	pixels	Base unit for screen display	1px = 1px
pt	point	Print unit, 1pt = 1/72in	1pt = 1.333px
pc	pica	Print Unit, 1pc = 12pt	1pc = 16px
in	in	1in = 96px = 2.54 cm	1in = 96px
cm	Centimeter (cm)	Metric Length Units	1cm = 37.795px
mm	Millimeter (mm)	1mm = 0.1cm	1mm = 3.7795px
Q	Quarter millimeter	1Q = 0.25 mm	1Q = 0.9449px

Relative Units

emRelative font size

font-size relative to the current element

font-size: 16px → 1em = 16px

remRoot Element Font Size

font-size relative to root element (html)

html {font-size: 16px} → 1rem = 16px

vwViewport Width

1% of viewport width

Viewport width 1920px → 1vw = 19.2px

vhViewport Height

1% of viewport height

Viewport height 1080px → 1vh = 10.8px

vminsmaller of vw/vh

the smaller of vw and vh

min (vw, vh)

vmaxlarger of vw/vh

the larger of vw and vh

max (vw, vh)

%Percentage

Corresponding properties relative to the parent element

Parent element width 400px → 50% = 200px

chCharacterWidth

Width of number 0

1ch ≈ 1 character wide in monospace fonts

exx-height

Height of lowercase letter x

Approximately 0.5x em

lhRow Height

The line-height value of the current element

line-height: 24px → 1lh = 24px

rlhRoot Element Line Height

line-height value of the root element

Root line-height: 24px → 1rlh = 24px

capUppercasecap height

Uppercase Height

Font Related

icIdeograph Width

CJK Character Width

1ic ≈ 1 Chinese character width

Common Design Specs

Root Font Size Default

Browser default font-size

1rem = 16px

Commonroot font sizeSettings

easier calculation

62.5% → 1rem = 10px

Print Resolution

Fixed conversions in CSS

1in = 96px (CSS)

mobile breakpoint

sm/md/lg

640px / 768px / 1024px

Safe Area

iOS notch adaptation

env(safe-area-inset-*)

1dp/pt (mobile)

Device Pixel Ratio Correlation

≈ 1.5-3px

Usage

Unit Categories

Absolute Unit

Converter Usage

Enter a value in the Unit Conversion tab and select the source unit, and the list shows the equivalent results of that value in other absolute units in real time. All conversions are based on px as the intermediate benchmark: source value x source unit baseRatio = pixel value, divided by the target unit baseRatio

Suggestions for use

Responsive layout prefers to use rem and vw/vh; font size setting recommends rem for uniform scaling; spacing can be em or rem; precise pixel control scenes use px; print style sheets use physical units such as pt, cm, mm. Setting the root font size to 62.5% allows 1rem = 10px for easy mental calculation

Notes

The default root font size of the browser is 16px, which can be adjusted by the user in the system settings, so the actual pixel value of the rem unit will fluctuate according to the user's preference; vw/vh contains the width of the scroll bar (some browsers), if you want to exclude the scroll bar, you can use svw/svh (small viewport) or lvw/lvh (large viewport); ch units represent only the width of the number 0 in non-equal-width fonts, not the same as the width of ordinary characters.