Science:

Dynamic adaptation, in fact, means that the adaptation is carried out in the place that needs to be adapted, not globally, all elements are adapted;

rem

Rem is a new relative unit in CSS3 (root EM). How is this unit different from EM? The differences are as follows: 1. When rem is used to set the font size for an element, it is still relative, but relative only to the HTML root element. 2. This unit combines the advantages of relative size and absolute size. It allows you to adjust all font sizes proportionally by changing only the root element, while avoiding the cascading of font sizes 3. Rem is supported by all browsers except IE8 and earlier. For browsers that don't support it, the solution is simply to add an absolute unit declaration. These browsers ignore font sizes set in REM. For example: p {the font - size: 14 px; The font - size: 0.875 rem; } (Recommend a unit conversion tool: http://pxtoem.com/)Copy the code

1. Use the media queries of CSS3

Media queries: Execute different CSS code by querying different widths to achieve interface configuration. @media screen and(max-width:600px){/** */ HTML {font-size:32px; }}Copy the code

Advantages:

  • Media Query can judge device pixel ratio with simple method and low cost, especially when PC and mobile terminals maintain the same set of code. The Bootstrap framework is laid out this way;
  • When adjusting the screen width, you can respond without refreshing the page;
  • The picture is easy to modify, you only need to modify the CSS file;

Disadvantages:

  • Large amount of code, easy to maintain – in order to accommodate large screens or HD devices, it will waste resources on other devices, especially loading image resources
  • In order to give consideration to the responsive display effect of mobile terminal and PC terminal, it is inevitable to lose their own unique interaction mode

2. Taobao Touch screen version uses Flex elastic box layout to achieve mobile terminal adaptation:

Flex flexible layout represented by taobao touch version home page +width:100% percentage unit; Where you don’t need to fit is still px;

Take the following example: Taobao touch screen version

Iphone6/7/8: bottom TAB bar, position:fixed positioning; display:flex; Box layout; flex-direction:row; justify-content:space-between;

Under the iPad: In the middle category: position: Absolute; display:flex; flex-direction:column; Elastic box

The development team of Jingdong Mall also uses the same adaptive layout of mobile/Web terminal: Jingdong development team

In my opinion, flex elastic box layout, with its flexible and convenient advantages, occupy a mainstream position in the adaptive layout; The Flex + VW layout/Flex + percentage layout is more popular with front-end developers

3. Zoom of REM +viewport

Set THE REM value according to the screen width, use REM units for elements that need to be adapted, and use PX units for elements that do not need to be adapted. 1em=16px;Copy the code

Implementation principle:

1. Enlarge the page by DPR according to REM, and set viewport to 1/ DPR. If the DPR of the iphone6 plus is 3, the entire page will be enlarged by 3 times. 1px(CSS units) under the plus default is 3px(physical pixels) and the viewport is set to 1/3, so the entire page will be retracted to its original size. To achieve high definition.Copy the code

In this case, the page width of the entire page displayed in the device is equal to the logical pixel size of the device, which is also called device-width. The formula for calculating device-width is: device physical resolution /(devicePixelRatio * scale), where scale is 1, device-width = device physical resolution /devicePixelRatio.