Know the rem

Rem (font size of the root Element) is a unit of relative length. The size of the computed value relative to the root element (that is, the HTML element).

Img {width: 4rem; // If the HTML font size is 50px, then 1 rem = 50px. // This equals 200px}Copy the code

Adaptation principle: Replace PX with REM, dynamically modify the font size of HTML to achieve different screen adaptation.

Adaptive processing

Take the 750px design for iPhone 6 as an example:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, Scalable = // scalable=no"> // scalable= 132px; Rem var tid var docEl = document.documentElement var refreshRem = function () {var clientWidth = 2.64  docEl.clientWidth < 750 ? docEl.clientWidth : 701 var ratio = clientWidth / 701 docel.style. fontSize = (ratio * 100) + 'px' // Window.addeventlistener ('resize', function () {clearTimeout(tid) tid = setTimeout(refreshRem, 300)}, false) refreshRem()Copy the code

If you open Google Chrome, switch to mobile mode and select iPhone 6, you will find that the page width is 375px. Isn’t the iPhone 6 750 resolution?

To answer the above questions, we need to understand a few basic concepts:

  • Density independent Pixel
  • Physical Pixel
  • Device Pixel Ratio
  • CSS pixel

Device-independent pixels (points) : Also known as density-independent pixels, can be thought of as a point in a computer coordinate system that represents a virtual pixel (such as a CSS pixel) that can be used by a program and then converted to physical pixels by the relevant system.

Physical pixel: Also known as device pixel, it is the smallest unit of display that the device can control. We can think of it as a point on the display. (A resolution of 1920×1080 or 750 x1334 is a physical pixel)

Device pixel ratio: DPR for short, it refers to the ratio of physical pixels to device-independent pixels. It can be calculated according to the following formula:

// in JavaScript, you can get the DPR devicePixelRatio of the current device = physical pixels/device-independent pixels by using window.devicepixelratioCopy the code

CSS pixel: A CSS pixel is a unit of abstraction that does not actually exist. It is mainly used in browsers to accurately measure content on Web pages.

Condensing the above concepts, let’s clarify the relationship between them:

From the above figure, we can see that the physical size of CSS pixels is consistent on different screens, but the physical size of CSS pixels is not consistent. On a normal screen, one CSS pixel corresponds to one physical pixel. On a Retina screen (DPR =2), one CSS pixel corresponds to four physical pixels.

summary

  1. On a browser page, CSS pixels are the same size as device-independent pixels, just in different units.

  2. Under the common screen: If the resolution of the 1080P monitor is 1920 x 1080 and THE DPR is 1, the independent pixels of the device are 1920 x 1080.

  3. Under Retina display: If the resolution of iPhone 6 is 750 × 1334 and THE DPR is 2, the device has 375 × 667 pixels.

You can see why F12, when reviewing elements, has a page width of 375px in iPhone 6 mode, since its device-independent pixels are 375 pt.

Learn more about viewPort

Consider a question: if the code above does not set viewPort, would the page width be 375px?

Let’s comment out the code to see what it looks like:

Based on our tests, the page is 980px wide and the browser does not have a horizontal scroll bar, but shrinks the page by default. What’s going on here? To answer this question, we need to understand:

  1. What is the viewport
  2. What is the difference and connection between layout viewPort and Visual viewPort
  3. How to set viewPort with meta tags

What is the viewport

In layman’s terms, a viewport is the part of the browser that displays a web page. By default, viewports on mobile devices are larger than the viewport area of the browser. This is because mobile devices tend to have smaller resolutions than desktop computers, so in order for websites designed for desktop browsers to display properly on mobile devices, All browsers on mobile devices have a default viewPort of 980px (on IOS, for example). This default viewPort is called layout ViewPort.

Layout ViewPort is not limited to the size of the viewable area of the browser. It can be larger or smaller than the viewable area of the browser. So you need a viewPort to represent the size of the browser’s viewport, and this viewport is called a Visual ViewPort.

/ / layout viewport width can be through the document. The documentElement. ClientWidth access / / visual viewport width can be through the window. The visualViewport acquisition The above example document. DocumentElement. ClientWidth window. / / 980 px visualViewport. Width / / 980.0000610351562 px (scale: 0.38265305757522583)Copy the code

What is the difference between layout ViewPort and Visual ViewPort

A Visual ViewPort is like a camera, and a layout ViewPort is like a piece of paper. Whichever part of the paper you point the camera at, you see. You can change the size of the camera area (adjust the size of the browser window) and the distance (adjust the zoom) of the camera. You can change the Visual ViewPort, but the Layout ViewPort remains the same.

How to set viewPort with meta tags

The Meta ViewPort tag was first introduced by Apple in its Safari browser to solve the viewport problem on mobile devices. Android and other browser vendors followed suit and introduced support for Meta ViewPort.

In the Apple specification, the Meta ViewPort has six properties (let’s call those things in content individual properties and values for now), as follows:

width Set layout ViewPort width to a positive integer or string “width-device”
initial-scale Sets the initial zoom value of the page to a number, possibly with a decimal
minimum-scale The minimum zoom value allowed to the user is a number, which can be a decimal
maximum-scale The maximum zoom value allowed to the user is a number, which can be a decimal
height Set the height of the Layout ViewPort. This property is not important to us and is rarely used
user-scalable Whether to allow users to zoom in and out. The value is “no” or “yes”, where “no” means “no” and “yes” means “yes”

How to set the current Layout ViewPort width to the width of the mobile device:

 <meta name="viewport" content="width=device-width">
Copy the code

There’s another line of code that does the same thing:

<meta name="viewport" content="initial-scale=1">
Copy the code

In theory, all this code does is not scale the current page, that is, the page should be as big as it should be. Width =device-width?

This is because when you set initial-scale alone, the browser sets the width of the Layout ViewPort to the width of the Visual ViewPort. The initial zoom value is 1 and the Visual ViewPort is equal to the width of the mobile device, which is 375px. (Try setting initial-scale to another value to see what happens.)

What if width and initial-scale=1 collide? Such as:

<meta name="viewport" content="width=400, initial-scale=1">
Copy the code

When this happens, the browser takes the larger of the two. For example, if width = 400 and the device width is 375, take 400.

summary

  1. Layout ViewPort Specifies the size of a page rendered. The default size is 980px on mobile devices (IOS is used as an example). We can change the size of the Layout viewPort by setting width=xx in viewPort.
  2. When you zoom, you change the size of the Visual Layout. Shrinking the Visual Layout actually means that you are further away from the Layout ViewPort so that you can see more content. Visual Layout is bigger because it’s closer to you. (Near big far small)
  1. Setting width=device-width and initial-scale=1 is a solution to the problem that the layout viewPort is always the same width as the width of the vertical screen in some mobile browsers.

conclusion

Web sites designed solely for PC do not need to set viewPort. By default, mobile browsers use a wide Layout Viewport and zoom screen to display web content.

Mobile sites need to set up the following viewport, and dynamically set REM to achieve the adaptation of different devices (there are other solutions).

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Copy the code

The resources

Viewport in-depth understanding

VisualViewport

The ultimate guide to iPhone resolution

Use Flexible to achieve terminal adaptation of H5 page