2dppx

2dppx is a CSS unit used in media queries to express device pixel density, defined as two device pixels for every CSS pixel. It is a unit of the CSS device-pixel ratio (DPR) and is the logical inverse of physical resolution. In CSS, 1dppx equals 1 device pixel per CSS pixel, which corresponds roughly to 96 dots per inch. Consequently, 2dppx corresponds to about 192dpi, though exact physical mapping can vary with device and zoom level.

In practice, 2dppx is used in responsive design to target high-density displays and to decide when to load higher-resolution assets. For example, a stylesheet might apply a different background image when the device has a resolution of at least 2dppx: @media (min-resolution: 2dppx) { .logo { background-image: url('logo-2x.png'); } } Alternatively, in older WebKit-based browsers you might see rules using the device-pixel-ratio feature: @media (-webkit-min-device-pixel-ratio: 2) { ... }

Notes: DPR and thus 2dppx depend on device characteristics and user zoom; some devices report non-integer ratios or vary with zoom. The dppx unit is part of CSS Media Queries Level 4 and is broadly supported in modern browsers, making it a standard approach for hiDPI design alongside the linked or embedded images (e.g., using srcset in HTML). 2dppx helps balance visual quality against bandwidth by enabling higher-resolution assets only on devices that can benefit.