When it comes to mobile layout, what are the solutions that come to mind, percentages? Rem? Vw/VH is still involved in the company’s project recently. In addition, I have done little mobile terminal adaptation before, so I will focus on recording the solution of this project here and refer to the ideas of Teacher Damo’s team.

First, the question

Our argument is not about how to layout, which layout to use, but sometimes we find that when we are working on a certain model, the display is fine. But as soon as I switched to another phone, there was a blur, especially in the picture.

The basic concept

Viewport viewport

The window has three parts:

  • Visual ViewPort. The width of the Visual ViewPort is window.innerWidth
  • A Layout viewport. CSS layout (especially percentage width) is calculated relative to layout viewports. Layout viewports are much wider than visual viewports. You can zoom in and out or scroll through Windows, but the size and shape of elements in layout Windows remain the same. The layout of the viewport width can be through the document. The documentElement. ClientWidth to obtain
  • Ideal Viewport. As for the width of the Ideal Viewport of different devices, you can check it at http://viewportsizes.com, which collects the ideal width of many devices.

PPK has a lot of research on viewport on mobile devices (the first, second, third), interested students can have a look, a lot of data and views in this paper are also from there. According to PPK, there are three viewports on mobile devices.

Physical Pixel

Physical pixels are also called device pixels. The display screen is composed of physical pixels one by one. On the same device, its physical pixels are fixed, which is set by the manufacturer at the factory, that is, the resolution of a device is fixed. Pt.

Device Independent Pixel

Also called logical pixels, they represent virtual pixels that can be used programmatically and are a general concept that includes CSS pixels

CSS pixel

For Web programming, the logical pixels we use in style code are abstract concepts that don’t actually exist.

Device Pixel ratio

The device pixel ratio, or DPR for short, defines the relationship between physical pixels and device-independent pixels. Its value can be calculated by the following formula:

Device Pixel ratio (DPR) = physical pixels/device-independent pixelsCopy the code

In JavaScript, you can get the DPR of the current device using window.devicepixelRatio.

For example, 🌰, in iPhone 4, the physical pixels are 640 x 960 (see here for physical pixels on other iPhone models). His DPR is 2, so his device-independent pixels (logical pixels) are 320×480.

This is a little bit easier to understand. We said that logical pixels include CSS pixels, so the physical pixels of CSS in iPhone4 are 2 physical pixels for each pixel of CSS. Why do you not have layout in PC? In fact, they do exist. We call a screen like a PC a normal screen because it’s actually 1px for every physical pixel. A screen with a logical pixel instead of a physical pixel is called a Retina screen. Look at this:

Ordinary screen

The Retina screen

Two more intuitive ones:

So we sort of know the answer to that question:

In theory, every bitmap pixel corresponds to every physical pixel until it is perfectly clear.

Front-end solutions

Rem + zoom

I won’t go into rem. The meta tag should be familiar to everyone

<meta name = "viewport" content ="Width = device - width, initial - scale = 1.0">
Copy the code

Initial-scale, which is interesting, means scale. I suddenly wanted to call him gold 1:1

The principle is actually very simple, here is a picture:

Therefore, the initial-scale of 2-x screen is 0.5, and the initial-scale of 3-x screen is 0.3333. The rem magnification corresponding to the corresponding multiple can reach the golden 1:1 HD state.

Famous examples are Flexible layout schemes

Vw came out of nowhere

To solve this problem, native CSS can do this scale control —–vw. Let’s see why:

Vw is a unit based on the length of the Viewport, and the Viewport is the area that the browser visualizes, and the Viewport is the area. The rem scaling was just a hack for the Ideal Viewport and DPR, so with VW we can eliminate scaling for DPR. For example, the width of the design should be 750px; So 100vw is equal to 750px, or 1vw is equal to 7.5px. Then we can convert the pixels on the design drawing to the VM layout. That’s when people say why bother… We have webpack, we have Loader, we have… postcss

The actual combat scheme in VUE

Here refer to the desert teacher this article nonsense not to say, first plug-in:

  • postcss-import
  • postcss-url
  • Autoprefixer does not need to be installed, vue-CLI is already integrated
  • postcss-aspect-ratio-mini
  • postcss-cssnext
  • The core postcss – px – to – the viewport
  • cssnano
  • cssnano-preset-advanced

Then add the following configuration to package.json in your project

"postcss": {
        "plugins": {
            "autoprefixer": {},
            "postcss-import": {},
            "postcss-url": {},
            "postcss-aspect-ratio-mini": {},
            "postcss-cssnext": {},
            "postcss-px-to-viewport": {
                "viewportWidth": "750".// The width of the window corresponds to the width of our design, which is usually 750
                "unitPrecision": "3".// Specify the decimal number to convert 'px' to the window unit value (often not divisible)
                "viewportUnit": "vw".// Specify the window unit to convert to. Vw is recommended
                "selectorBlackList": [ // Specify a class that is not converted to Windows units. It can be customized and added indefinitely. It is recommended to define one or two common class names
                    ".ignore".".hairlines"]."minPixelValue": 1.// less than or equal to '1px' does not convert to window units
                "mediaQuery": false// Allow conversion of 'px' in media queries
            },
            "cssnano": {
                "preset": "advanced"."autoprefixer": false."postcss-zindex": false // When the plugin is enabled, the z-index value is reset to 1}}},Copy the code

Then you can have fun writing code. For example, write as many pixels as your design is given. Postcss automatically calculates how much VW you should convert to. Post a picture

Compiled:

conclusion

Finally, there are a few more questions, there will be a 1px classic question, here is a foreshadowing. Everyone has a good plan can put forward, I am also halfway, so have different views welcome to discuss. Share innocence, welcome to team up. Double pressure, ha ha ha broken sleep