Research the pixel unit

[basham]

There seems to be a lot of confusion over what constitutes a pixel in CSS. Try to find an accurate definition, even though it will probably vary among devices. This will be used for outlining best practices for using CSS units.

References:

• W3C CSS Values and Units Module Level 3
• CSS: em, px, pt, cm, in...
• The Lengths of CSS
• In CSS, “px” is not an angular measurement and it is not non-linear
• CSS units explained
• A pixel is not a pixel is not a pixel
• Optimising for High Pixel Density Displays

[basham]

From Chad Nobbe regarding Supporting Multiple Screens best practices guide for Android:

Density-Independent Pixels, Android devices will allow you to automatically scale your pixels to the screen size. While it will automatically scale your design to the screen size you should:

• Explicitly declare in the manifest which screen sizes your application supports
• Provide different layouts for different screen sizes
• Provide different bitmap drawables for different screen densities

While Android devices automatically handle the scaling this isn’t true for Apple devices. Although it appears that Apple is working on something similar.

[basham]

Created a CodePen demonstrating how 1px equals 3/4pt and 1pt equals 4/3px. http://codepen.io/basham/pen/Hwjyl

[basham]

From The Lengths of CSS, this CodePen shows the user's browser support regarding various units. http://codepen.io/chriscoyier/full/CiwFD/

[basham]

From In CSS, “px” is not an angular measurement and it is not non-linear:

The way the CSS authors handled this problem (again, sensibly, IMO), was to allow the user agent (ie. the browser) to choose a useful precise size for the “px” unit and then size all the other units relative to that “px” unit. This is referred to in the standard as “anchoring” the system of units.

...

As an aside here, notice that for printers, which don’t really have a relevant concept of “pixel” (dots are too small to care about), the recommendation is to anchor to physical units in which case 1cm in CSS really would be one real-world centimeter. (N.B. I don’t know how accurately this recommendation is typically implemented.)

...

The reference pixel is intended to reflect “yer basic pixel”: a pixel on a standard 96dpi monitor positioned roughly arms-length from the observer. That is, your typical web viewing setup from the 90s-2000s. However, the reference pixel is intended to scale in size depending on the “typical” distance of an observer from the display. If your display is typically held about half an arms length from the observer, then its reference pixel would be half as large. Two arms lengths away? twice as large.

...

The recommendation (when anchoring to px units) is to size the 1px unit to be the integer number of device pixels that gets you closest to the reference pixel size at the typical viewing distance.

[basham]

From Optimising for High Pixel Density Displays:

According to the CSS 2.1 Specification:

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values.

So, a ‘CSS pixel’ indicates one point on the virtual pixel grid to which our CSS design aligns. This either directly matches the actual device pixel grid on which our content is rendered or it is intelligently scaled.

This has led to the definition of a ‘Density-independent pixel (dip)’. (Android Developers)

A virtual pixel unit that applications can use in defining their UI, to express layout dimensions or position in a density-independent way.

[basham]

Research updated in Gist. https://gist.github.com/basham/2175a16ab7c60ce8e001