About PX values in css (pixels)

Scene:

People: Front-end Intern "a tree" and transduction engineer "Yufeng"
Event: Designer design draft, front page implementation

Yufeng: Tree, design manuscript sent to you, so dot pixels, you ┏ (￣へ￣) =?
Ashu: ~ (>_<) ~ Hair problem Karma ~
Ashu: Wow, why did you give the design is 640px wide, the IPhone 5 is not 320px wide???
Yufeng: A pixel is not a pixel are not a pixel, are you know?
Ashu: (#‵′), I know Google ...

Why did the above situation occur, did one of them make a mistake, put this kind of oolong?
In fact, they are all right, just not talking about the same "pixel".

This pixel is non-pixel

Device pixel:
Device pixel setting is a physical concept that refers to the physical pixels used in the device.
For example, the iphone 5 resolution 640 x 1136PX.

css pixels (CSS pixel):
CSS pixels are the concept of Web programming, referring to the logical pixels used in CSS style code.
In the CSS specification, the length units can be divided into two categories, absolute (absolute) units, and relative (relative) units. The PX is a relative unit, relative to the device pixel.

For example, the iphone 5 uses the Retina Retina screen, the 2px x 2px device pixel represents the 1px x 1px css pixel, so the number of devices is 640 x 1136PX, and the number of CSS logic pixels is x 568px.

How is the conversion between the device pixel and the CSS pixel generated?
This needs to be talked about per inch pixels (pixel per inch) and device pixel ratio (devices pixel ratio).

Pixel per inch (pixel per inch):
PPI, which represents the number of pixels per inch (pixel), the higher the value, represents the higher the density of the display to show the image. The PPI can be calculated by referring to the Wikipedia pixels per inch.

Unit pixel ratio (device pixel ratio):
The above calculated PPI is to get the density demarcation, get the default scaling ratio, that is, the device pixel ratio .

By the know, the PPI in 120-160 between the cell phone is classified as low-density mobile phones, 160-240 is classified as medium density, 240-320 is classified as high density, more than 320 is classified as ultra-high density (Apple gave it a tall name--retina).

When you get the device pixel ratio, you know the ratio between the device pixel and the CSS pixel. When this ratio is 1:1, 1 device pixels are used to display 1 css pixels. When this ratio is 2:1, 4 device pixels are used to display 1 css pixels, and when this ratio is 3:1, 9 css pixels are displayed using 1 (3*3) device pixels.

You can refer to the following two Web sites for more information on the device pixel ratio for mainstream mobile devices:
http://screensiz.es/
http://www.devicepixelratio.com/

Finally, about how designers and front-end engineers work together :
Designers typically create designs based on device pixel.
Front-end engineer, with reference to the relevant device pixel ratio (device pixel ratio), for conversion and encoding.

Reference:
"1":a Pixel is not a pixel are not a pixel
"2": The crisis of pixel density
"3": Mobile-webapp Development essentials

Wen/Ashu (Jane book author)
Original link: http://www.jianshu.com/p/af6dad66e49a#
Copyright belongs to the author, please contact the author to obtain authorization, and Mark "book author".

About PX values in css (pixels)