Skip to content
The CSS Chamber of Measures

/static/camara/en/unidade/dpi/

Menu

CSS-027 · Resolution

dpi

Dots per inch — the density of ink, and now of glass.

One dpi is one dot per inch: the unit print shops always used to measure the fineness of ink, admitted into CSS through the <resolution> type. The arithmetic is the reference pixel's: the standard screen counts as 96dpi, and a factor-2 “retina” display answers for 192dpi.

Its service counter is the resolution media queries, choosing images to match the device's density. In practice it was retired by its cousin dppx, which does the same math without carrying the 96 in its head.

@media (min-resolution: 192dpi) {
  .logo {
    background-image: url(logo@2x.png);
  }
}
With ink doubled on the glass, the sheet swaps its image.