Who has a delicate heart, he will know when broken.

foreword

This article summarizes what I personally know about mobile adaptation. Hope to be helpful to readers.

##start

(1) Appetizers

Because this section has a lot of basic knowledge and conceptual content, those with some front-end foundation can skip this section. (This knowledge point text comes from network information)

① Screen size, screen resolution, screen pixel density

Screen size: Refers to the diagonal length of the screen, in inches (1 inch =2.54 cm). Common screen sizes include 2.4, 2.8, 3.5, 3.7, 4.2, 5.0, 5.5, and 6.0. So for a 6.0 cell phone, 6 x 2.54 = 15.24 centimeters.

Screen resolution: the number of pixels in horizontal and vertical dimensions, expressed in px (1px=1 pixel). A mobile phone’s resolution is typically defined by vertical pixels and horizontal pixels, such as 1960 x 1080. (A pixel here refers to a pixel on a physical device). For example (iphone6 750 * 1337) (iphone6Plus 1960 * 1080)

Screen pixel density/pixel density/screen density: The number of pixels per inch that can be displayed on a screen. The unit is PPI, or Pixels per inch. Screen pixel density is related to screen resolution.

② Physical pixels, CSS pixels

Device pixel/physical pixel :(resolution) when you buy your phone, you have a resolution of n x m, which is n x m pixels of the screen, and one dot (small square) is a physical pixel. It is the smallest granularity a screen can display. A device pixel, also known as a physical pixel, is the tiniest physical part of a display device. Each pixel can be set to its own color and brightness depending on the operating system. The number of physical pixels on any device is fixed.

CSS pixels: CSS pixels are abstract units used primarily in browsers to accurately measure (determine) the content on a Web page. It is an abstraction layer created for Web developers to use in CSS or JavaScript. Typically, CSS pixels are called device-independent pixels, or “DIPs” for short. At a standard display density (normal screen), one CSS pixel corresponds to one device pixel.

CSS pixels vs. physical pixels: An element with width of 200px takes up 200 CSS pixels, but how many physical pixels 200 CSS pixels take up depends on the characteristics of the screen (whether it is high density, i.e. pixel ratio) and the user’s zoom behavior. In Apple’s Retina screen, which has twice the pixel density of a normal screen, the element spans 400 device pixels, and many more if the user zoomed in. Of course, many phones now have larger and larger pixel ratios. For example, my meizu phone and my current iPhone 8 Plus have reached 3, so this element normally spans 600 device pixels.

Device-independent pixels: Device-independent pixels (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 into a physical pixel by the relevant system.

Bitmap pixel: A bitmap pixel is the smallest data unit of raster image (such as: PNG, JPG, GIF, etc.). At least one bitmap pixel corresponds to one physical pixel, so that the image can be perfectly and clearly displayed.

For Web developers: every CSS and javascript-defined pixel we use is essentially a CSS pixel, and we don’t care how many device pixels a CSS pixel spans during development. We hand over this complex calculation to the browser, which depends on the characteristics of the screen and how much the user zooms in.

(3) Pixel ratio Pixel ratio: its official definition is: the ratio of device physical pixels to device independent pixels, that is, devicePixelRatio = physical pixels/independent pixels (window.devicePixelRatio)

console.log(window.devicePixelRatio)
Copy the code

(4) viewport

Layout viewport: On PC, the layout viewport is equal to the width of the browser window.

console.log(document.documentElement.clientWidth); // Layout viewportsCopy the code

Visual viewport: The visual viewport is the area that the user is looking at. Users can zoom to manipulate the visual viewport without affecting the width of the visual viewport. The visual viewport determines what the user sees. Getting the width of the visual port in JavaScript can be done with ‘window.innerWidth.

console.log(innerWidth); // Set the scroll bar to include the scroll barCopy the code

And you can do it with JS.

console.log(outerWidth); // include the browser's edge area console.log(screen.width); // Screen widthCopy the code

(2) Introduce one (based on REM)

Rem: ‘The font size of The root element’ is The font size of The root element. Rem adaptation is based on the font size of THE HTML layout.

  • 2.1 Set REM using @media query:
// code HTML {max-width: 640px; margin: 0px auto; font-size: 100px; } @media only screen and (max-width: 414px){ html{ font-size: 64px; } } @media only screen and (max-width: 375px){ html{ font-size: 58px; } } @media only screen and (max-width: 360px){ html{ font-size: 56px; } } @media only screen and (max-width: 320px){ html{ font-size: 50px; <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Copy the code

The general width of the design drawings given to us by designers is 640, 750,375. Here, 640 is used as the benchmark. The width of the entire screen is set to

640/100 = 6.4 REM 414/64 ≈ 6.4 REM 375/58 ≈ 6.4 REM 360/56 ≈ 6.4 REM 320/50 ≈ 6.4 REM

Here are just a few commonly used @media queries. The methods vary greatly when more queries are needed. With this adaptation, we can write CSS using rem as the unit, 1rem = 100px. This method is also a more commonly used method.

Disadvantages: This method requires a lot of calculation, it needs to calculate the corresponding font size within the given range, and find the most appropriate font size within each range, which is quite troublesome. There is also some error.

  • Get innerWidth with js or set font size with clientWidht
/ / the code document. The documentElement. Style. FontSize = document. DocumentElement. ClientWidth / 6.4 + 'px'; / / or the document. The documentElement. Style. FontSize = window. The innerWidth / 6.4 + 'px'; // This is equivalent to setting the screen width to 6.4rem, which is 640px, or 100px = 1rem. When the layout can be used to rem layout for the unit, (other size instead of how much design) / / you can add code document. The body. The style.css. FontSize = '14 px; // Restore the font size on the body, <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Copy the code

Of course, if you’re on a computer and you’re accessing the mobile web. Is the document. The documentElement. ClientWidth > 640, if you also want to have a better access.

/ var/can add code deviceWidth = document. The documentElement. ClientWidth; if(deviceWidth > 640){ deviceWidth = 640; Document. The documentElement. Style. FontSize = deviceWidth / 6.4 + 'px'; }Copy the code
  • 2.3 special handling of __1px__ borders

1px here refers to 1 physical pixel, when there are special requirements, such as 1 physical pixel for the border. The initial-scale attribute in the meta tag is set to reduce the effect. After setting the meta tag, we can change it dynamically.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> let dpr = window.devicePixelRatio; // Let scale = 1/ DPR; / / and scaling the let width = document. The documentElement. ClientWidth / 6.4 * DPR; // Let metaN = document.querySelector('meta[name="viewport"]'); metaN.setAttribute('content','content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); // let styleN = document.createElement('style'); styleN.innerHTML = 'html{ font-size:' + width + 'px; } '; / / set the rem document. Head. The appendChild (styleN);Copy the code
  • 2.4 Font size is used in the page

Here, the font size on taobao and netease pages does not use REM, but use @media for query. This is only for reference, because REM is also available.

@media screen and (max-width:321px){.test{font-size:15px}} @media screen and (min-width:321px) and (max-width:400px){ .test{font-size:16px}} @media screen and (min-width:400px){.test{font-size:18px} }Copy the code

(3) Actual combat introduction ii (based on VW WH unit)

Vw VH can easily handle elastic layouts,

1VW = 1/100th 100th viewport width 1vh = 1/100th 100th viewport heght Set element width as a percentage of viewport width

The smaller vmin relative to the width or height of the viewport. The smallest one is divided into 100 units of vmin. The larger vmax relative to the width or height of the viewport. The largest one is divided into 100 units of Vmax. Through Vmin and Vmax can do mobile phone rotation style.

Disadvantages/advantages: Vw VH Vmin Vmax is not very compatible with mobile phones and requires Android 4.4 or higher. Although it is not particularly popular now, there are few users of Android 4.4 now, so using VW as an adaptation unit is likely to become popular.

It is supported above iOS 8 and Android 4.4 on mobile terminals, and has perfect comprehensive support in the wechat X5 kernel.

With VW as the layout unit, the method is as follows. (Compiled using the sass function)

$vm_base: 640; @function vm($px) { @return ($px / 640) * 100vw; }.test{width:vm(40)}.test{width:vm(40)}Copy the code

If it helps, give it a thumbs up.

This is an article I wrote on another platform, moving on to nuggets.