Detailed description of resolution, pixel, and PPI

Screen SizeRefers to the length of the diagonal of the screen, usually in inches, 1 inches (inch) = 2.54 cm (cm). The traditional picture size is also the concept. So the same size (diagonal) of the screen, may also be different length-width ratio.
Pixel (Pixel): is a bitmap (such as a digital image) in the abstract concept, refers to the computer to the image sampling point, no specific size. Popular understanding is a single box (point) where the computer saves the location and color values of the sample point.

Resolution : The total number of pixels. such as 1024px*600px, indicates that there are 1024 pixels (sample points) on each row and 600 pixels (sample points) on each column.
Note that any display or print settings do not change the image itself (resolution) as long as the digital image itself is not edited.
pixel density (PPI): The number of pixels per inch, in English pixels per inch.

DPI (Dot Per inch): The meaning and the PPI, refers to the number of dots printed per inch, is the unit of measurement in the printing industry. PPI and DPI are often used in mixed, general "Pixels" for the computer display field, while "dots" are used in the printing or printing field.
The relationship between resolution, PPI, and size:
The physical size of the picture × the PPI of the picture = the physical size of the picture displayed on the screen x the total number of pixels in the ppi= picture of the screen (resolution)
A photo with a resolution of 1920x1080, output to a 5-inch photographic paper with a PPI of 440.
If you output to a 760-inch (19-metre) billboard, the PPI is only 3, which is very blurry.
Common ppi/dpi Settings:
1. Laboratory PHOTOS: 300 or above
2. Business cards, magazines, etc.: 300
3. HD Photo Poster: 96~200
4. Network image, web interface: 72
5. Large Inkjet: 25~50
When the same digital picture is displayed on a computer monitor or mobile phone screen, the higher the PPI of the monitor or phone screen, the more delicate the effect, the smaller the picture appears on the monitor or phone, and the lower the PPI on the monitor or phone screen, the more coarse the effect (even the sense of grain) The bigger the picture looks on the monitor or phone.

The physical resolution is an intrinsic parameter of the display and other devices and cannot be adjusted. Generally refers to the maximum (best) Number of pixels the device can display. For example, LED LCD screen through the grid to divide the liquid crystal body, a liquid crystal (photoelectric) is a physical pixel point. The higher the PPI, the higher the sharpness.
The display resolution, in fact, refers to the resolution set by the operating system, not the physical resolution of the display. However, the liquid crystal display can be considered equivalent only if the system resolution is consistent with the physical resolution (that is, the point-to-point display) and the display works best.

The PX in CSS is relative units, relative to different device viewport. The same element (in PX), which differs in physical size on different devices.
The CSS2 specification recommends that 1 inches contain 96px. If the user agent resides on a device other than this value, the user agent should be scaled back to a more reasonable value. So in the development in order to take into account the different devices in the display effect, only need to consider the physical resolution of the device . You can view page effects on various screens through Chrome's resolution test plugin, or from a tool class website.

The

page zooms in/out: The total pixels of the
element are the same, the device physical pixels are unchanged, but the corresponding relationship changes. The original is 1 to 1, the element is enlarged by the interpolation algorithm from the left and right pixels to fill the pixels, occupy more physical pixels, that is, 1 element pixels corresponding to a plurality of physical pixels (display points).