Mobile adaptation: Start with pixels to understand mobile adaptation

This is the fifth day of my participation in the First Challenge 2022, for more details: First Challenge 2022 “.

I do not know whether you usually have the following two questions

The iPhone X has a 5.8-inch screen with a resolution of 2436×1125 pixels and 458 ppi. When we were in Chrome Phone developer mode, the iPhone X had a 375 X 812 resolution.

2. Why can the same image be displayed on different screens (1080p, 2K, 4K) with little difference? Why can the same image look very clear on a screen with high resolution?

Only by solving the above two questions can we truly understand the differentiation of screens and do a good job in mobile adaptation

1. Physical pixel (device pixel PT)

Physical pixels, also known as device pixels, are fixed in pt when the screen is made. Each screen is made up of many light-emitting diodes, which are arranged in different colors to display different images, as shown below. By adjusting the leds you can change the color and brightness of the screen image. Each led is considered as a physical pixel, and the iPhone X press release said 2436×1125, which is the hardware physical pixel.

2. Logical pixels (CSS pixel PX)

• Because manufacturers are different, screen sizes are different, we can not directly use physical pixels to do image display, such as 400 physical pixel wide equipment and 2000 physical pixel equipment compared to see 400PT Tencent video screen that is not a big gap, one only accounts for 1/5 of the content is less than, a just right. But what you find in reality is that the difference isn’t that big, it’s just that it’s smaller overall. In order to accommodate these differences, the concept of logical pixel is proposed.
• First, use 1px=1pt on a small 400pt device, and then use 1px=5pt on a large screen. The 400px image is a perfect display. The 375 x 812 logical pixels mentioned in Question 1 above are used to smooth out differences between devices. So when you adjust a lot of phones on Chrome, the difference is very small because it is around 3,400, which is approximate to smooth out the physical pixel gap

3. Device Pixel ratio (DPR)

DevicePixelRatio :DPR = device pixel/CSS pixel for example, iPhone 6 physical pixel 750 x 1334, ideal viewport 375 x 667, DPR = 2 after looking at the explanation of physical pixel and logical pixel, Some would argue that mobile phones have even higher physical resolution than computers, which is not at all true. Always understand that the physical pixel is not directly related to the size of the device. A mobile phone may have 3000 physical pixels, but many large computers have only 2000 physical pixels. Therefore, 1px=1pt on a computer, so it is impossible to display small contents in the same resolution on a mobile phone, so 1px=4pt, logical pixel ratio is 4. The main purpose of this explanation is to dispel a misconception that screen size is not directly related to resolution

The higher the pixel ratio of the device, the higher the DPR of the screen, he’s showing the kind of double image that the designer gave, does the triple image have more pixels, the HD screen is much more detailed, the screen display gap is out, Apple’s Retina screen has a lot more pixels than HD screen, so it’s all two, Three pixels show 1px, which is why H5 can only operate PX, not PT like Android development.

4.PPI

PPI is the number of pixels per inch. Pixels per inch refers to the number of pixels per diagonal.

So how to calculate it? First of all, you know how many inches of the launch device in Question 1. When you buy the phone, you find that the iPhone X 5.5-inch is much smaller than the iPhone 8 plus 5.5-inch. Don’t be confused because the screen size refers to the diagonal length of the screen, the iPhone 8-iphone X bezel, and so on are all narrower.

2 is the physical pixel that counts the diagonal

PPI=√ (X^2+Y^2)/Z (X: length pixels; Y: number of pixels of width; Z: screen size).

Iphonex ppi (=)2436^2+1125^2) /5.8=460About the ppiCopy the code

5.UI design pixels

Usually, we use PSD and other design drawings. The pixels shown above are designed by designers according to different screens. For example, the mobile terminal uses the standard width of 375, and the PC terminal uses the standard width of 1920, so that the standard design can be better compatible with devices

6. Relative pixels EM and REM

Px is a logical pixel, which is the absolute pixel unit, and cannot be displayed according to the device. Although most logical pixels are compatible with 300-400, for example, iPad is more than 400, and 1px=1pt in computer is 1920, the gap is even bigger. Taobao makes different design drawings according to different resolutions. Different zoom out to deal with. For those who wanted a single set of code to handle multiple devices, relative pixels were born

1. Relative pixel EM. Em is the font size relative to the parent element, which is actually several times the font size of the parent element. The font size can be CSS specified or inherited from the parent element, but if neither is present, the default (usually 16px) is used. If the parent element specifies “font-size:20px; The child element uses “width: 10em”, so the actual width of the child element is 200px. Use em units to pay attention to HTML inheritance, because it is done relative to the parent set and is easy to mess up

2. Relative pixel REM. Rem differs from EM in that it is the px value specified by the font-size attribute of the HTML node relative to the root node. All elements in the page that use REM as a unit of length are HTML based, which has the advantage of not being confused by hierarchy

Figure out the pixels, and I’ll update the screen adaptation step-by-step