primers

When I first wrote the page, I was curious about the PX in the page. The resolution on the computer seemed to correspond to the width of the page rendered, but it was not the same on the mobile phone. I remember I went to find relevant information at that time and seemed to know what was going on. Recently, this question came to mind again, but I have no idea how to express it, and I don’t have relevant notes, so I think it is necessary to distinguish the relevant concepts.

  • Origin
  • My GitHub

The screen size

Screen size refers to the size of the diagonal of the screen. It is often described as an inch (abbreviated in), 1 in = 2.54 cm.

pixel

A pixel is the smallest controllable element of an image on a screen. It is not a dot or a square, but an abstract sample. Each pixel has a color, which is usually represented by 3 or 4 components. For example, the RGB method uses the optical intensity of the three primary colors of red, green and blue to represent a color, while the CMYK method uses the content of four pigments of cyan, magenta, yellow and black to represent a color. The CMYK color gamut is common in the printing industry and printers.

A pixel is often considered the smallest unit in a digital image. Pixels can mean different things in different contexts, such as pixels in video, pixels in printing, pixels on a display screen, or pixels in a digital camera (light-sensitive elements). Depending on the context, there are more precise synonyms such as sample point, byte, bit, superset, spot, and so on.

Equipment pixel

Device pixels are the real pixels used in the device, also known as physical pixels. In the same device, the total number of pixels is fixed.

Pixel density PPI and DPI

PPI (pixels per inch) is the number of pixels per inch. It is often used to measure the pixel density of computer display devices.

DPI (dots per inch) is the number of points per inch of digital printing, used to measure the density of spatial points in the printing industry.

In theory, PPI can be calculated from the known diagonal size and screen resolution. It can be calculated by the following formula:

  • W is the number of pixels in the horizontal direction
  • H is the number of pixels in the vertical direction
  • D is the screen size

For example, if the resolution of a 21-inch screen is 1920*1680, then W =1920, H =1680, D =21, put PPI=121.49 in the calculation.

CSS pixel

CSS pixels are programming concepts that are used to logically measure the units of pixels.

The resolution of the

Image resolution refers to the ability of a measurement or display system to resolve details. Described from different aspects, there are pixel resolution, spatial resolution, spectral resolution and temporal resolution. Common contact is mostly pixel resolution, such as the commonly referred to as video resolution, display resolution and graphics resolution. For the time being, I will only discuss pixel resolution categories. Other types are described here.

Screen resolution

Screen resolution is the total number of pixels displayed on the screen, and there is a further breakdown: physical resolution and display resolution.

  • Physical resolution is an inherent parameter of the display and cannot be adjusted. It generally refers to the maximum number of pixels that can be displayed on the screen.
  • Display resolution is the resolution set by the operating system. When the display resolution and physical resolution are consistent, the display effect is the best, and the general recommended resolution is the physical resolution. The system set resolution to take effect is converted through the algorithm.

For example, looking at information on a mobile phone, you can see that the resolution information is 720 by 1280, meaning that the screen has 720 pixels in the horizontal direction and 1280 pixels in the vertical direction.

Image resolution

Image resolution is the total number of pixels per inch. The image resolution is also expressed as “number of horizontal pixels × number of vertical pixels”. For example, an image has a resolution of 320 by 289, meaning that the image has 320 pixels in the horizontal direction and 289 pixels in the vertical direction.

devicePixelRatio

This refers to Windows. DevicePixel Ratio in JavaScript, which is the ratio of physical pixels to device-independent pixels (dips, dp) on the device. The formula is: DevicePixel Ratio = physical pixels/device independent pixels. This can also be interpreted as the ratio of CSS pixels to physical pixels. Simply put, it tells the browser how many physical pixels are needed to draw a CSS pixel. This property can be used to distinguish retinal devices from non-retinal devices.

Device independent pixels, also known as logical pixels, are physical units of measurement based on a computer coordinate system. An application tells the system the device independent pixels, and the system converts the device independent pixels into physical pixels. A size defined in device independent pixels that can be displayed at the appropriate size regardless of the screen parameters. Screen. Width on iOS retina device returns dips, but screen.width on Andioid device does not necessarily return dips.

The resources

  • https://en.wikipedia.org/wiki…
  • https://zh.wikipedia.org/wiki…
  • https://zh.wikipedia.org/wiki…
  • https://en.wikipedia.org/wiki…
  • https://en.wikipedia.org/wiki…
  • https://zh.wikipedia.org/wiki…
  • https://www.jianshu.com/p/c33…
  • https://developer.mozilla.org…
  • https://www.quirksmode.org/bl…
  • https://developer.mozilla.org…
  • https://en.wikipedia.org/wiki…
  • http://yunkus.com/physical-pi…
  • https://segmentfault.com/a/11…