CODEWITHSUNDEEP
cssscreenpixelmeasurement
Lucas
Lucas

Reputation: 115

CSS - Units of measurement and screen resolution: what's reference pixel, anyway?

Hi, there! I was reading the W3C spec about Units of measurement (https://www.w3.org/TR/css-values-3/#reference-pixel) and the fact is that I didn't understand what is a reference pixel. Can you guys explain it to me, or point me to another reference or explanation that's easier to understand. Also I'm not sure if I really understand the other things about Units and Measurements ha ha. Really, that seems too hard. Thank you!

Upvotes: 1

Views: 510

Answers (1)

Josh
Josh

Reputation: 4322

The reference pixel is an attempt to standardize what "pixel" means in web development. The reason that this matters is because the physical measurement of a pixel can vary greatly depending on the pixel depth of the display.

For example, old CRT monitors had 72 pixels per inch, whereas an iPhone 7+ has 401 pixels per inch. So a literal measurement of 100px would be 1.39 inches on the CRT monitor and 0.25 inches on the iPhone.

This article also has a pretty good explanation that helped me understand it better.

A List Apart, "A Pixel Identity Crisis" by Scott Kellum. January 17, 2012

"The w3c currently defines the reference pixel as the standard for all pixel-based measurements. Now, instead of every pixel-based measurement being based on a hardware pixel it is based on an optical reference unit that might be twice the size of a hardware pixel. This new pixel should look exactly the same in all viewing situations..."

"When using a phone that you held close, a reference pixel will be smaller on the screen than a projection you view from a distance. If the viewer holds their phone up so it is side-by-side with the projection, the pixel sizes should look identical no matter the resolution or pixel density the devices have. When implemented properly, this new standard will provide unprecedented stability across all designs on all platforms no matter the pixel density or viewing distance."

Upvotes: 1

Related Questions