<resolution> - CSS: Cascading Style Sheets
dppx represents the number of dots per px unit.
... due to the 1:96 fixed ratio of css in to css px, 1dppx is equivalent to 96dpi, which corresponds to the default resolution of images displayed in css as defined by image-resolution.
... x alias for dppx.
...And 3 more matches

-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
although the value is a <number>, and thus doesn't syntactically allow units, its implicit unit is dppx.
... implementation /* a unit of "dppx" is implied: */ @media (-webkit-min-device-pixel-ratio: 2) { ...
...is equivalent to: */ @media (min-resolution: 2dppx) { ...
...is equivalent to: */ @media (max-resolution: 2dppx) { ...

-moz-device-pixel-ratio - CSS: Cascading Style Sheets
use the resolution feature with the dppx unit instead.
... media: media/visual accepts min/max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based browsers that do not support dppx.
... example: @media (-webkit-min-device-pixel-ratio: 2), /* webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* older firefox browsers (prior to firefox 16) */ (min-resolution: 2dppx), /* the standard way */ (min-resolution: 192dpi) /* dppx fallback */ note: see this csswg article for compatibility good practices regarding resolution and dppx.

Window.devicePixelRatio - Web APIs
let pixelratiobox = document.queryselector(".pixel-ratio"); let mqstring = `(resolution: ${window.devicepixelratio}dppx)`; const updatepixelratio = () => { let pr = window.devicepixelratio; let prstring = (pr * 100).tofixed(0); pixelratiobox.innertext = `${prstring}% (${pr.tofixed(2)})`; } updatepixelratio(); matchmedia(mqstring).addlistener(updatepixelratio); the string mqstring is set up to be the media query itself.
... the media query, which begins as (resolution: 1dppx) (for standard displays) or (resolution: 2dppx) (for retina/hidpi displays), checks to see if the current display resolution matches a specific number of device dots per px.

CSS3 - Archive of obsolete content
adds: the dppx unit to the <resolution> data type.

The Firefox codebase: CSS Guidelines
however, if only 1x and 2x png assets are available, you can use this @media query to target higher density displays (hdpi): @media (min-resolution: 1.1dppx) ...

CSS numeric factory functions - Web APIs
umber); css.vb(number); css.vmin(number); css.vmax(number); css.cm(number); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.px(number); // <angle> css.deg(number); css.grad(number); css.rad(number); css.turn(number); // <time> css.s(number); css.ms(number); // <frequency> css.hz(number); css.khz(number); // <resolution> css.dpi(number); css.dpcm(number); css.dppx(number); // <flex> css.fr(number); examples we use the css.vmax() numeric factory function to create a cssunitvalue: let height = css.vmax(50); console.log( height ); // cssunitvalue {value: 50, unit: "vmax"} console.log( height.value ) // 50 console.log( height.unit ) // vmax in this example, we set the margin on our element using the css.px() factory function: myelement.attribut...

CSS values and units - CSS: Cascading Style Sheets
dppx, x dots per px unit.

CSS reference - CSS: Cascading Style Sheets
orcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-fa...

image-set() - CSS: Cascading Style Sheets
<resolution> units include x or dppx, for dots per pixel unit, dpi, for dots per inch, and dpcm for dots per centimeter.

The building blocks of responsive design - Progressive web apps (PWAs)
you can also serve a larger graphic to a higher resolution device using a resolution media query, like so: button { background: url(images/low-res-header.jpg) 1rem center ; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { button { background: url(images/high-res-header.jpg) 1rem center ; } } this looks rather complicated, but really it's not — we are providing a number of media query options, as at this time different browsers support different resolution media query types and even units.