Some complicated sounding concepts

Physical pixel: Roughly understood as the dot on the screen, the smallest electronic component that can display color, the real thing! The resolution of the same size mobile phone is different, which means the number of dots on the same screen is different, representing the number of dots on the screen.

(Below are two devices with different physical pixels on the screen)

Density – Indenpendent Pixel: The pixel (PX) set in the CSS refers to this pixel. Long before Retina screens, individual pixels on devices were equated to physical pixels, meaning that 1px corresponded to a physical dot that actually existed on mobile devices, so the question was (⊙)?

Problems: From the original particles are pretty big screen, to 720 p to 1080 p, even now the 4 k of the screen, the physical resolution of the mobile phone is more and more big, then exposed a question, if we phone resolution doubled, size is changeless, equipment independent pixel and physical pixel is equal relations under the premise of our image will not be multiplied the shrink? Don’t worry, Steve jobs came up with the concept of logical resolution.

About logical resolution: Steve jobs first proposed the concept of Retina Display at the launch of iPhone4. In the Retina Display screen used by iPhone4, 2×2 physical pixels are used as one pixel, which means that 1px content is displayed on four physical pixels. This makes the screen look more refined, but does not change the size of the elements. From then on high resolution device a more logical pixels, although the difference between these equipment logic pixel does not span large but still a bit different, so was born the mobile end page need to fit this problem, since the logic derived from physical pixel, pixels that they will have a pixel ratio, is called: “the DPR”

Such as:

We can see that the iPhoneX and iPhone6/7/8 both have horizontal logical pixels of 375

The iPhoneX will naturally have longer vertical logical pixels because of its larger actual size. The iPhoneX has much higher physical pixels than the iPhone6/7/8, so the screen looks more refined and the DPR is higher

!!!!!!!!! So logical resolution I understand as a unit that represents the actual screen size of the device:

Lovetoactual adaptation

Some concepts for skull slapping:

Viewport base: Viewport is an area of the browser used to display web pages.

On the PC side the size is the size of the browser’s viewable area, so we won’t pay too much attention to this concept.

In most cases on mobile, the layout ViewPort is larger than the viewport of the browser, so there is a scroll bar, So regardless of layout viewPort, Visual ViewPort, ideal ViewPort these complex concepts as long as the first step to set viewPort to the visible area of the range is right ↓

<meta name="viewport" The content = "width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, the minimum - scale = 1.0, user - scalable = no, viewport - fit = cover" />Copy the code
**– Next comes the real adaptation ↓—-**

!!!!!!!!! Proportionally scaled: REM layout (Flexibel belongs to REM layout), VW + VH layout

1. Equal ratio zooming-flexible: it is a mobile terminal adaptation solution of Ali’s early open source. Rem layout is used after flexible. 14px, so 1rem is 14px in HTML structure, 2rem is 28px. Flexible does this by setting the font szie of the root element to one-tenth of the screen size, using 750 layouts by default. Flexibel sets font size for the root element of a dynamic device based on the device size

We know that 1rem = 1/10th of the screen size 20px: 750px =?? So 20px on the design is equal to 20/75 rem on a mobile device

So flexibel did just one thing: dynamically set the font size of the root element

2. Proportional scaling — VW

CSS has new units vw, vh, where 1VW is 1% of the screen width and 1vh is 1% of the screen height

Vw is difficult to calculate. Plug-ins can be used to realize the conversion from PX to VW during the project

So the question is…? left

One last thought

Do users buy bigger mobile devices to read bigger letters? It seems that most of the design is to see more content, so after analysis found that if the size of the design map corresponds to the logical resolution of the device, PX with Flex streaming layout may present the effect is the most suitable for users’ habits, rather than see the content of equal scale enlargement.

over

(╹▽╹) humble rookie and glass heart write bad please gently spray, where wrong please correct me immediately, thank you for reading ~ mug mug