Resolution, pixel, and PPI, resolution, pixel PPI

Resolution, pixel, and PPI, resolution, pixel PPI

Screen SizeIt refers to the length of the diagonal line of the screen, generally in inches, 1 inch (inch) = 2.54 cm (cm ). In the traditional sense, the photo size is also the concept. Therefore, screens of the same size (diagonal) may have different aspect ratio.
Pixel: This is an abstract concept in a bitmap (such as a digital image). It refers to the computer's sampling points on the image, with no specific size. Generally, a box (point) stores the position and color values of the sampling point.

Resolution: The total number of pixels. For example, 1024px * 600px indicates that there are 1024 pixels (sample points) on each row and 600 pixels (sample points) on each column ).
Note that as long as the digital image itself is not edited, no display or print settings will change the image itself (resolution ).
Pixel density (PPI)The number of Pixels Per Inch. The value is Pixels Per Inch.

DPI (Dot Per Inch): Similar to ppi, it refers to the number of points printed per inch, which is the unit of measurement in the printing industry. Ppi and dpi are often mixed. Generally, "pixels" are used in computer display, while "points" are used in printing or printing.
Relationship between resolution, PPI, and size:
The physical size of the image × the image's PPI = the physical size of the image displayed on the screen × the screen's PPI = the total number of image pixels (resolution)
A photo with a resolution of 440 x is output to a 5-inch photo paper with a PPI.
If it is output to a 760-inch (19-meter) billboard, the PPI is only 3, which is very fuzzy.
Common PPI/DPI settings:
1. Photo printing: 300 or above
2. Business cards and magazines: 300
3. HD photo poster: 96 ~ 200
4. network image, webpage: 72
5. Large Inkjet Printing: 25 ~ 50
When the same digital image is displayed on a computer display or mobile phone screen, the higher the monitor or mobile phone screen, the more delicate the effect, and the smaller the picture looks on the monitor or mobile phone; on the contrary, the lower the PPI on the monitor or mobile phone screen, the rougher the effect (or even the sense of particles), and the larger the picture on the monitor or mobile phone.

Physical resolutionIt is an inherent parameter of a display and other devices and cannot be adjusted. It generally refers to the maximum (optimal) Number of metrics displayed on the device. For example, an led LCD screen uses a grid to divide the liquid crystal body. A liquid crystal (photoelectric) is a physical pixel. The higher the PPI, the higher the resolution.
The display resolution is actually the resolution set by the operating system, rather than the physical resolution of the display. However, only when the system resolution is the same as the physical resolution (that is, point-to-point display), LCD displays the best results, so they can be considered equivalent.

Px in Css is the relative unit, which is relative to viewport of different devices. The physical sizes of the same element (in px) on different devices are different.
Css2 standard 1 inch contains 96px. If the device where the user agent is located is not the value, the user agent should be scaled to a more reasonable value. Therefore, in development, the display effects of different devices should be considered,You only need to consider the physical resolution of the device.. You can use chrome's resolution test plug-in or a tool-type website to view page effects on various screens.

Page enlargement/reduction:
The total pixel of the element remains unchanged, and the physical pixel of the device remains unchanged, but the correspondence changes. It turns out to be 1-to-1. After the elements are amplified, the interpolation algorithm is used to fill out the pixels from the left and right pixels to occupy more physical pixels, that is, one element pixel corresponds to multiple physical pixels (display points ).