Comm 333 Web Design II

Skip to navigation

Terminology for Responsive Media

dppx
Dots per px unit. You can effectively think of this as a density multiplier. For example, most Retina screens have twice the display density of normal screens. They have a dppx of 2. In CSS, 1dppx = 96dpi. W3C CSS Values Spec
device-pixel-ratio (dpr)
Number of device pixels per CSS Pixel (non standard, use for Webkit browsers) Made with Drew
dpi
Dots per inch W3C CSS Values Spec
retina display
Retina refers to Apple devices that have a screen with such a high pixel ppi (pixels per inch). Initially they were always 2 dppx, but that is not necessarily the case any longer. Apple owns the word Retina so it technically only refers to Apple products.
intrinsic dimensions
Reference to the set of the intrinsic height, intrinsic width, and intrinsic aspect ratio (the ratio between the width and height) for an image or object. These intrinsic dimensions represent a preferred or natural size of the object itself. W3C CSS Image Spec
intrinsic height
Natural or preferred height of the image or object. W3C CSS Image Spec
intrinsic width
Natural or preferred height of the image or object. W3C CSS Image Spec
intrinsic aspect ratio
Natural or preferred aspect ratio of the image or object. Aspect ratio is the ratio between the width and height. W3C CSS Image Spec
ldpi, mdpi, tvdpi, hdpi, xhdpi, xxhdpi and xxxhdpi
Names for various categories of dppx for Android devices. Note how there are many of them because there are so many devices in the Android eco system.
resolution (in CSS media query)
describes the resolution of the output device, i.e. the density of the pixels. Most common units are dpi (dots per inch) and dppx (dots per px unit). W3C CSS Image Spec