I am going through a responsive design course on Lynda and the author defined reference pixel as being independent of hardware pixel; however, he did not go any further to explain how and/or why. I have googled to no avail. I do not understand how that works. Thank you.
2 Answers
here' short answer: what you call 'reference' pixels could contain 2x2, 3x3 etc physical pixels. when you set div 100x100 it will rely on 'reference' pixels, but if you put text/image inside it could be rendered much clearly as real pixels amount will be e.g. 9 in 1 'reference' pixel. also there are devices with other device pixel ratio

- 4,556
- 2
- 40
- 58
If I can say in one line, Reference pixel is the pixel in reference to the user's eye position and hardware pixel is the smallest point on the screen which is a result of rgb combination. They are very much identical in nature. Now in details,
Hardware Pixels - This is the pixels we use everyday. It is the smallest unit upon which everything is built on. Very much like a point makes a line
Reference Pixel - This is changing over the period of time. The thing they use is called optical reference unit.
Whenever we use a device, the distance of the device and our eyes can vary. As the hardware pixels can not be changed in their size, we can only see a stretched version of it in our eyes. This may not be very much different from the actual one.
But, in case of optical reference or reference pixel, it changes the color depth by using inertial sensors of the device. As a result we can see the exact color at every viewing position of our eyes.
For android devices there is a term called density-independent pixels or dip. Because we are using devices with different screen color depth, the color density varies from device to device. To make it standardized, Android introduced it.
In short, the reference pixel is to make the pixel color independent of the the viewer's optical view point irrespective of the pixel density of the devices.

- 1,320
- 1
- 12
- 25