Virtual container:

An artificial 980px wide virtual container. When a web page is ported from PC to mobile, it can be regarded as loading the web page into a virtual container, and then scaling the virtual container to display on mobile.Copy the code

PC:

The pixel display is generally the width and height of the web page design.Copy the code

Mobile client:

Pixel display is divided into physical pixels and logical pixels.Copy the code

Physical pixels:

Device pixel, on the same device, its physical pixel is fixed, which is set by the manufacturer at the factory, that is, the resolution of a device is fixed.Copy the code

Logical pixel:

A CSS pixel, a small square in the viewport, is the logical pixel that is used in the CSS style code. If physical pixels are equal to logical pixels in a device, there will be no problem. For example, in the iPhone 4, the physical pixels are 640px by 960px and the logical pixels are 320px by 480px. Therefore, about four physical pixels are needed to display a CSS pixel.Copy the code

A simple example:

*** code demo: ***Copy the code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <! -- <meta name="viewport" content="width=device-width, > <title>Document</title> </head> <body> <div style="width: 200px; height: 200px; background-color: cyan;" ></div> </body> </html>Copy the code

Effect: