This is the 23rd day of my participation in the August More Text Challenge.More challenges in August
Related articles:
- 1. Understand CSS thoroughly
- 2. Understand CSS thoroughly
- 1. Understand CSS thoroughly
- 1. Understand CSS thoroughly
- 1. Understand CSS thoroughly
What are the differences between device pixels, CSS pixels, device independent pixels, DPR, ppi?
The background,
In CSS, we usually use PX as the unit. In PC browser, each pixel of CSS is a physical pixel corresponding to the computer screen
This creates the illusion that the pixels in the CSS are the physical pixels of the device
However, this is not the case. A CSS pixel is an abstract unit, and the 1px in the CSS represents different physical pixels on different devices or in different environments
When we do mobile development, the same 1px setting will look very different on different mobile devices
Behind this comes the concepts of CSS pixels, device pixels, device independent pixels, DPR, ppi
Second, the introduction
CSS pixel
CSS pixel (CSS Pixel, PX) : Suitable for web programming, the CSS suffix px is a unit of length
In the CSS specification, there are two types of units of length, absolute and relative
Px is a unit relative to the device pixel.
Typically, the page scaling ratio is 1. 1 CSS pixel equals 1 device-independent pixel
CSS pixels are relative in two ways:
- On the same device, each CSS pixel represents a device pixel that can be changed (such as adjusting the screen resolution)
- The device pixel represented by each CSS pixel can vary between devices (e.g., two different phone models)
Zooming in and out of the page will also cause a change in the PX in the CSS. If the page is doubled in size, what was originally 1px becomes 2px, and the actual width stays the same, 1px becomes the same as the original 2px (elements will take up more device pixels).
Suppose that what used to take 320px to fill now takes 160px
Px can be affected by the following factors:
- Pixels per inch (PPI)
- Device Pixel ratio (DPR)
Question to consider: Have you ever encountered the problem that the 1px line on the mobile terminal is too thick? How to solve it?
Equipment pixel
Device Pixels, also known as physical pixels
The smallest physical unit that the device can control the display. It is not necessarily a small square block, nor does it have a standard width and height, but is simply a “dot” used to display rich colors
One lantern (physical pixel) is composed of red, blue and green lights, and three small lights mix different colors with different brightness
From the day a screen is manufactured in a factory, the device pixels on it are fixed in pt
Device independent pixel
Device Independent Pixel: Device-independent logical pixels that represent virtual pixels that can be used programmatically. It is a general concept that includes CSS pixels
This can be viewed in javaScript with window.screen.width/window.screen.height
For example, we might say “the computer screen is not good for playing games at 2560×1600 resolution, so let’s set it to 1440×900”, where “resolution” (loosely speaking) means device-specific pixels
A device may contain one or more physical pixels in individual pixels, and the more pixels there are, the clearer the screen looks
Here’s an example of why the concept of a virtual pixel unit, device-independent pixels, emerged:
The iPhone 3GS and iPhone 4/4S both measure 3.5 inches, but the iPhone 3GS has a 320×480 resolution and the iPhone 4/4S has a 640×960 resolution
That means the iPhone 3GS has 320 physical pixels and the iPhone 4/4S has 640 physical pixels
If we lay it out with real physical pixels, say 320 physical pixels, the phone with 640 physical pixels will be half empty. To avoid this problem, virtual pixel units are created
We agree that the iPhone 3GS and iPhone 4/4S both have 320 virtual pixels, except that on the iPhone 3GS, one virtual pixel ends up being one physical pixel, and on the iPhone 4S, one virtual pixel ends up being two physical pixels
One virtual pixel is converted into several physical pixels, which we call the device pixel ratio, or DPR, as described below
dpr
Device PixelRatio (DPR), which represents the conversion relationship between device independent pixels and device pixels, can be obtained from window.devicePixelRatio in JavaScript
The calculation formula is as follows:
When the device pixel ratio is 1:1, use 1 (1 x 1) device pixels to display one CSS pixel
When the device pixel ratio is 2:1, use 4 (2 x 2) device pixels to display one CSS pixel
When the device pixel ratio is 3:1, use 9 (3 x 3) device pixels to display 1 CSS pixel
As shown below:
When the DPR is 3, a 1px CSS pixel width corresponds to a 3px physical pixel width and a 1px CSS pixel height corresponds to a 3px physical pixel height
ppi
Ppi (Pixel per inch) refers to the number of pixels per inch, or more accurately, pixel density. The higher the value, the higher the density of the screen
The calculation formula is as follows:
Third, summary
Without scaling, one CSS pixel equals one device-independent pixel
Device pixels do not change after they are produced by the screen, whereas device-independent pixels are virtual units that change
PC side, 1 device-independent pixel = 1 device pixel (at 100%, unscaled)
On mobile, one device-independent pixel at a standard screen (160ppi) = one device pixel
Device Pixel ratio (DPR) = device pixel/device independent pixel
Pixels per inch (PPI), the higher the value, the sharper the image