Mobile development--pixel knowledge

Abstract units: can be larger and smaller depending on the relationship of different devices. The physical pixels are fixed and do not change.

Example: IPhone5

1 css pixels = 4 physical pixels

The units in 1136 and 640 are DP

Window.devicepixelratio is the ratio of physical pixels and device independent pixels (DIP or DP) (device-independent pixels (dips)) on the device.

The formula means: Window.devicepixelratio = physical pixel/dips 1px = DPR*DPR *DP

DPI: On the monitor is the sharpness, on the mouse to indicate the accuracy of mouse movement.

Ppi:pixels per inch ppi=√ (x^2+y^2)/Z (X: length pixels; Y: width pixels; Z: Screen size).
Dpi:dots per inch pixels, which is the scan accuracy. Printer

DPI (dot per inch, how many pixels) the red Rice phone dpi is calculated as follows (red Rice phone resolution is 1280*720): Math.sqrt (Math.pow (1280,2) + Math.pow (720, 2))/4.7 = 312
Physical size Acquisition formula: Math.sqrt (Math.pow (w, 2) + Math.pow (H, 2))/dpi = Screen physical dimensions

density=dpi/160 (Px/inch)

Terms	Description	Note
Physical size (screen inches)	The actual physical size of the phone. such as 3.5-inch, 3.7-inch, 4.7-inch, 5.0-inch	The red rice phone is 4.7 inches
Resolution (resolution)	Number of pixels in the vertical and horizontal direction of mobile phone screen	Red rice cell phone is 1280*720
DPI (dot per inch)	Pixels per inch. such as 160dpi,240dpi,320dpi and so on. Suppose (320*240) the screen physical size of the resolution (2 inches * 1.5 inches), dpi=160 (Here I think there is an unwritten rule: An inch of =160dip. There will be a test proof behind	The Red Rice phone dpi is calculated as follows: Math.sqrt (Math.pow (1280,2) + Math.pow (720, 2))/4.7 = 312 So the physical size of the get formula: Math.sqrt (Math.pow (w, 2) + Math.pow (H, 2))/dpi = physical size of the screen
Density (Density)	The concentration of pixel values in the screen. Calculation: density=dpi/160	Density of red rice phones: 320/160 = 2

px pixels are relative units, the higher the resolution of the screen, the PX looks smaller! And the PC is the absolute unit. Equivalent to the size of our new No. fourth.
In the production of Web pages, the basic unit selects PX instead of PT, because PT is also converted to PX display via the browser's DPI (for example, the DPI of Firefox is 96, then 9pt = 12px)
In CSS, the units of measure are divided into two types:

Relative Unit: px/em/ex/%
Absolute unit: CM/PT/IN/PC/MM

Specific explanations of these units:

Px
Relative length units. Pixels (Pixel).
Pixels are relative to the display screen resolution. For example, the resolution used by wondows users is typically 96 pixels per inch. The resolution used by Mac users is typically 72 pixels per inch.

Em
Relative length units. The font size relative to the text within the current object.
If the font size of the current inline text is not artificially set, the default font size is relative to the browser.

Ex
Relative length units. The height relative to the character "X". This height is usually half the size of the font.
If the font size of the current inline text is not artificially set, the default font size is relative to the browser.

Pt
Absolute length units. Point.
1in = 2.54cm = 25.4 mm = 72PT = 6pc

Pc
Absolute length units. Picas (Pica). Equivalent to the size of our new No. fourth.
1in = 2.54cm = 25.4 mm = 72PT = 6pc

Inch
Absolute length units. inches (inch).
1in = 2.54cm = 25.4 mm = 72PT = 6pc

Mm
Absolute length units. MM (millimeter).
1in = 2.54cm = 25.4 mm = 72PT = 6pc
Cm
Absolute length units. CM (centimeter).
1in = 2.54cm = 25.4 mm = 72PT = 6pc

Mobile development--pixel knowledge