CSS pixels, physical pixels, logical pixels, devices like silverhalide, PPI, Viewport

References organized from: HTTPS://GITHUB.COM/JAWIL/BLOG/ISSUES/21

http://www.jianshu.com/p/af6dad66e49a

PX: px is a relative unit, relative to the device pixel ( device pixel ) margin:2px, where the PX is a logical pixel .

PPI: The number of pixels per inch, put on the monitor is about how many physical pixels per inch and the point distance of the display device.

DPI: How many dots per inch. It is also determined by the size of the physical pixels.

What we usually call the resolution of the display, in fact, refers to the Desktop setting resolution, not the physical resolution of the display.　 such as mobile phone: 1080x1920px! 1 device pixels

DPR (device pixel ratio) = device pixel/css pixel css pixel = device Independent pixel = logical pixel

PPI: pixels per inch (device pixels = physical pixels)

The first retina screen is iphone 4 with a screen resolution of 960 * 640 (326PPI).

Pixel density of the screen can be calculated by screen resolution and screen size

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.

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.

Ashu
Links: http://www.jianshu.com/p/af6dad66e49a
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

CSS pixels, physical pixels, logical pixels, devices like silverhalide, PPI, Viewport