dppx
Dots per CSS pixel: the device pixel ratio.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 29+ |
| Chrome Android | 29+ |
| Edge | 12+ |
| Firefox | 16+ |
| Firefox Android | 16+ |
| Safari | 16+ |
| Safari iOS | 16+ |
Formula 1dppx = 96dpi = 1x
How it works
Dots per pixel is the number of device pixels that fit along one CSS pixel. It is the resolution unit closest to what developers call the pixel ratio: (resolution: 2dppx) matches when window.devicePixelRatio is 2, and 1dppx is 96dpi. In Chromium a query built from the live ratio, such as (resolution: ${devicePixelRatio}dppx), matched at each of seven ratios from 1 to 3, including 1.1 and 2.625.
A query for exactly 2dppx matches at a ratio of 2 and at no other. It missed at 1.5, 2.625 and 3 in the same measurements, though all of those are dense screens. Use min-resolution for the decision to load a sharper image, not an exact value. Anything that changes how many device pixels one CSS pixel covers changes the answer, and a browser that reports page zoom through this ratio will answer differently once the reader zooms.
dppx is also how image-set() labels candidates: each image in the list says the density it is made for, and the browser chooses one for the current screen. Both 2x and 2dppx are accepted there.
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
min-resolution queries that serve sharper assets to dense screens.
Watch out
A query for exactly 2dppx matches only at a ratio of 2, not at 1.5 or 3, so use min-resolution. The ratio also moves with anything that changes device pixels per CSS pixel, so a resolution query does not prove the screen is dense.
Before
@media (resolution: 2dppx) {
.hero-art { background-image: url("hero-2x.webp"); }
}After
@media (min-resolution: 2dppx) {
.hero-art { background-image: url("hero-2x.webp"); }
}