dpcm
Dots per centimeter.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 29+ |
| Chrome Android | 29+ |
| Edge | 12+ |
| Firefox | 8+ |
| Firefox Android | 8+ |
| Safari | 16+ |
| Safari iOS | 16+ |
Formula 1dpcm = 2.54dpi
How it works
Dots per centimeter counts the same dots as dpi over a shorter distance: 1dpcm equals 2.54dpi, because an inch holds 2.54 centimeters. At a device pixel ratio of 2 it comes to 75.59dpcm. (min-resolution: 75dpcm) matches such a screen, and (min-resolution: 76dpcm) does not.
The conversion from dppx gives numbers with long fractions: 1dppx is 37.795dpcm, so 3dppx is 113.39dpcm. A threshold in dpcm has to be chosen with care. 113dpcm catches a ratio of 3, while 120dpcm, which looks like the same thing, does not, and 2dppx or 3dppx needs no such care.
Use it only where the surrounding specification is metric, such as a brief that quotes 118dpcm for what other documents call 300dpi.
Try it
Convert angles, time and resolution
Pick a unit and a value. The other units of the same kind are shown, and an angle turns the square.
deg- 90
grad- 100
rad- 1.5708
turn- 0.25
Your screen:
The same as a table
| Kind | Equal to |
|---|---|
| A right angle | 0.25turn, 90deg, 100grad, 1.5708rad |
| A duration | 1s, 1000ms |
| A resolution | 1dppx, 1x, 96dpi, 37.795dpcm |
Reach for it when
Resolution queries in projects that work in metric print units.
Watch out
It is a fixed ratio to dppx, not a measurement of the panel: 1dppx is about 37.8dpcm on every screen.
@media (min-resolution: 113dpcm) {
.map { background-image: url("map@3x.png"); }
}