Preface

With the popularity of mobile devices, mobile web plays an increasingly important role in the work of front-end engineers. Mobile devices update frequently, and there are many mobile phone manufacturers. The problem is that the screen width and resolution of each machine are different. This makes it more difficult for us to write the front-end interface, and the problem of adaptation is becoming more and more prominent at present. I remember when I first started developing mobile products, I asked MM for different screen designs, and the results were predictable. This article shares some experience in dealing with multi-screen adaptation, hoping to benefit you.
Special note: Before starting all this, Please add the following meta to the head of the engineers who develop the mobile interface:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Simple Things, Simple Doing - Width Adaptation
The so-called width adaptation is strictly an extension of the adaptive layout of the pc terminal in the mobile terminal. Full-screen layout is needed when dealing with the front-end interface of the pc terminal. Its implementation is also relatively simple. The outer container elements are paved with percentages, and the inner sub-elements are fixed or floating left and right.

.div {
  width:100%; height:100px;
}
.child {
  float: left; 
}
.child {
  float:right;
}

Because the parent element uses a percentage layout, its width will stretch indefinitely as the screen is stretched. Because of the floating of sub-elements, their positions will be fixed at both ends. In the new era, there are new methods for width adaptation. With the popularity of flexible layout, it is often replaced by flex's flexible layout and becomes more and more "flexible". To understand the flexible layout, go to the flex layout tutorial.

Size Discrimination-Completion Adaptation

This solution is much better than the previous one. Not only is the width adaptive, but also all the elements of the interface are adjusted according to the device with different resolution and screen width to adjust the values of elements, fonts, pictures, height and other attributes. Simply put, under different screens, you see different font sizes and element heights. Here, some people will say that the use of media query properties, according to different screen widths, adjust the style. I thought so before, but you need to consider that many elements on the interface need to set fonts. If you use media query to set different attributes for each element under different devices, how many screens will increase our css? In fact, here we use the js and CSS attributes rem to solve this problem.
REM attributes refer to setting the font size of an element relative to the root element. It can also be used as a set of units that can be labeled with px, such as height setting.

html {
 font-size: 10px;
}
div {
 font-size: 1rem;
 height: 2rem;
 width: 3rem;
 border: .1rem solid #000;
}

Using the above method, div inherits font-size of html node, and defines a series of style attributes for itself. At this time 1em is calculated as 10px, that is, font-size value of root node. So div is 20px in height, 30px in width, 1px in border and 10px in font size. Once we have this method, we can naturally set different font sizes of root nodes according to different screen widths. Assuming that the standard we are designing now is the iPhone 5s, the screen resolution of the iPhone 5 series is 640. In order to unify the specification, we set the root element font-size at the resolution of iPhone 5 to 100px.

<!--iphone5-->
html {
 font-size: 100px;
}

Then, on this basis, a ratio of 6.4 can be calculated. We can know the font size of the underlying elements of other mobile phone resolution devices:

/*
Data calculation formula 640/100 = device-width/x can set the font size of other device root elements
ihone5: 640  :  100
iphone6: 750 : 117
iphone6s: 1240 : 194
*/
var deviceWidth = window.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

In the head, we add the above code to dynamically change the font-size value of the root node.
Next, we can use rem to set the relative values of various attributes according to the font size of the root element. Of course, if it's a mobile device, the screen will have an upper and lower limit. We can control the resolution within a certain range, beyond which we will no longer increase the font size of the root element.

var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';

Normally, you don't need to consider the screen stretching and shrinking dynamically. Of course, if the user turns on the screen settings and changes the screen width after the page is loaded, then we have to consider this issue. It is also very simple to solve this problem. By monitoring the changes of the screen, we can dynamically switch the element style:

window.onresize = function(){
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
 };

In order to improve performance and make the code more perfect, throttle function can be added to it:

window.onresize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
}, 50);

By-pass solution to the ratio of high fidelity labeling to actual development value
If the standard of your design draft is iPhone 5, you will find that when you get the design draft, you can't write css according to the high fidelity label at all, but take each value in half, because the resolution of mobile devices is different. Designers make annotations on real iPhone 5 machines, and the resolution of the iPhone 5 series is 640. In fact, we only need to follow the standard of 320 in our development. In order to save time and not need to take half of the annotation every time, we can scale the whole web page to simulate and improve the resolution. This is a simple way to set up different meta for different devices.

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scal

This setup also solves the problem that 1px pixels look too thick on Android machines, because 1px of the border is compressed to 0.5px on Android machines with 1px pixels. All in all, once and for all! Taobao and Netease News's mobile web terminal adopt the above way, adapting to various device screens, you are interested to refer to. The following is the complete code:

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
  <script type="text/javascript">
(function() {
  // deicePixelRatio: Device Pixel
  var scale = 1 / devicePixelRatio;
  //Setting up High Resolution of meta Compression Interface Simulator
  document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  //debounce is a throttling function, which is realized by itself. Or introduce underscoure.
  var reSize = _.debounce(function() {
      var deviceWidth = document.documentElement.clientWidth > 1300 ? 1300 : document.documentElement.clientWidth;
      //According to the standard of 100px font at 640 pixels, a font scale of 6.4 is obtained.
      document.documentElement.style.fontSize = (deviceWidth / 6.4) + 'px';
  }, 50);
 
  window.onresize = reSize;
})();
  </script>
  <style type="text/css">
    html {
      height: 100%;
      width: 100%;
      overflow: hidden;
      font-size: 16px;
    }
 
    div {
      height: 0.5rem;
      widows: 0.5rem;
      border: 0.01rem solid #19a39e;
    }
 
    ........
  </style>
  <body>
    <div>
    </div>
  </body>
</html>

Let Elements Fly - Media Query
Using the new attribute media query feature of css can also achieve the layout style we mentioned above. Set the font size of the root element for size:

@media screen and (device-width: 640px) { /*iphone4/iphon5*/
    html {
        font-size: 100px;
      }
    }
 
@media screen and (device-width: 750px) { /*iphone6*/
    html {
        font-size: 117.188px;
      }
    }
    @media screen and (device-width: 1240px) { /*iphone6s*/
      html {
        font-size: 194.063px;
      }
    }

This method is also feasible, but the disadvantage is that the flexibility is not high. To get the exact value of each device, we need to calculate it by ourselves, so we can only take the range value. Considering that there are many screens and different resolutions, it is impossible to write out the css code for each model. But it also has the advantage that it does not need to monitor the browser's window changes, it will follow the dynamic changes of the screen. Of course, the use of media queries is not only as simple as here, but also far less than the second kind of adaptation. The most obvious thing is that it can display different layout styles according to different devices! Note that this is no longer as simple as changing fonts and heights, it directly changes the layout style!

@media screen and (min-width: 320px) and (max-width: 650px) { /*Mobile phone*/
  .class {
    float: left;
  }
}
 
@media screen and (min-width: 650px) and (max-width: 980px) { /*pad*/
  .class {
    float: right;
  }
}
 
@media screen and (min-width: 980px)  and (max-width: 1240px) { /*pc*/
  .class {
    float: clear;
  }
}

This kind of adaptive layout is commonly used in compatible PC and mobile devices. Because of the large screen span, the elements of the interface are far from being satisfied by changing the size. It's time to redesign the layout and layout of the whole interface.
Many css frameworks often use such multi-terminal solutions, and the famous bootstrap uses this approach to grid layout.