Skip to content
The CSS Chamber of Measures

/static/camara/en/unidade/dppx/

Menu

CSS-028 · Resolution

dppx

Dots per CSS pixel — density spoken in the stylesheet's own tongue.

One dppx counts physical dots per CSS pixel: 1dppx is the classic screen, 2dppx the “retina” one, 3dppx the densest glass. It is the same number JavaScript hands over in devicePixelRatio — and the standard still registers x as its notarized alias.

It is the modern form of resolution queries: min-resolution: 2dppx says “dense screen” without making anyone multiply by 96 in their head. The right choice whenever the sheet must serve an image worthy of the glass.

@media (min-resolution: 2dppx) {
  .mapa {
    background-image: url(mapa@2x.png);
  }
}
The same query as dpi, minus the 96 times table.