x
The short form of dppx, mostly written next to images.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 68+ |
| Chrome Android | 68+ |
| Edge | 79+ |
| Firefox | 62+ |
| Firefox Android | 62+ |
| Safari | 16+ |
| Safari iOS | 16+ |
Formula 1x = 1dppx = 96dpi
How it works
x is a spelling of dppx, and 2x means exactly 2dppx. Most authors know it from image-set(), where image-set(url(a.png) 1x, url(b.png) 2x) offers one image for ordinary screens and another for double-density ones. In that list the letter reads as “times”, which is why it is easy to mistake for a multiplier.
It is a label, not a factor. You cannot write font-size: 2x, which Chromium rejects, and it multiplies nothing. In Chromium it also works in media queries: on a screen at a ratio of 2, (resolution: 2x) matches, and (min-resolution: 2x) matches at 2 and 3 but not at 1.5.
When you must choose between the two, dppx is the clearer name inside a media query and x is the shorter label inside image-set(). In Chromium they match the same screens.
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
Density labels in image-set(), and short resolution values in media queries.
Watch out
x is a label for a density, not a multiplier. It does nothing in width or font-size, where Chromium 156 rejects it.
.badge {
background-image: image-set(
url("badge.png") 1x,
url("badge-2x.png") 2x,
url("badge-3x.png") 3x
);
}