Mobile terminal adaptation scheme

Concept:
The so-called mobile terminal adaptation means that WebApp is displayed in equal proportion on screens of different sizes

Method 1: JS dynamic modification with CSS preprocessor (less)

	// Calculate screen width
var screen = document.documentElement.clientWidth;
	// Calculate the font size, taking one sixteenth of the screen width
var size = screen / 16;
	// Set root element font size
document.documentElement.style.fontSize = size + 'px';

js gets the width of the current screen and sets one sixteenth of the screen width to the font size of html

// At this time, the width of the design is 375. Define a less variable equal to 1 / 16 of the design width
@rem: 375/16rem;

If 16 in the design draft can be any value at this time, the screen width in js will be divided by how much you set, and then assigned to the font size of html.

If the width and height of an element in the design draft is set to 500px

.box{
	width: 500px;
    height:500px;
}

In this case, it can be replaced by:

.box{
	width: 200/@rem;
    height:200/@rem;
}

analysis:

The element size in the design document is determined based on the width of the design document. As mentioned above, the width of 200px is determined based on the design document 375px. However, when the width obtained in js changes, the adaptation problem needs to be solved. Assuming that the screen width obtained in js is 750px, the font size value of html is 750 / 16
px；

At this time, the width of the calculated box is 400px

Note: 1rem = 1 font size of HTML

This method does not need to calculate the unit value. It only needs to define a less variable, find and replace it, and replace the unit px with / @ rem.

Method 2: JS dynamic modification and rem adaptation

This method is similar to method 1, but it does not need to define variables in less. It only needs to get js, find and replace px.

	// Calculate screen width
var screen = document.documentElement.clientWidth;
	// Set root element font size
document.documentElement.style.fontSize = screen + 'px';

.box{
	width: 200px;
    height:200px;
}

.box{
	width: 200/375rem;
    height:200/375rem;
}

analysis:

This method is js to dynamically obtain the screen width, directly set the font size of html to the screen width, and then convert it in less.
If the screen width obtained by js is 750px and the font size value of html is set to 750px, the calculated box width is 400px

200/375rem = 200/375*750 px = 400px

Method 3: viewport adaptation

Principle: adjust the width of all equipment layout viewports to the width of the design drawing by setting initial scale

//Get meta node
var metaNode = document.querySelector('meta[name=viewport]');

//Define the width of the design draft as 375
var designWidth = 375;

//Calculate the width of the current screen and the proportion of the design
var scale = document.documentElement.clientWidth/designWidth;

//The mobile terminal adaptation is achieved by setting the initial scale value of content in the meta element
meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";

Method 4: rem unit mode (current pixel divided by 100)

1. Get the design drawing and calculate the total width of the page. For easy calculation, take 100px font size. If the design drawing is iPhone6, the calculated result is 7.5rem. If the page is iPhone5, the calculated result is 6.4rem.

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

2. Dynamically set the font size value of html tag:

 document.documentElement.style.fontSize = document.documentElement.clientWidth / with rem Total page width in + 'px';

3. To make a page, measure the PX size of the design drawing divided by 100 to get the REM size (200px is converted to 2rem).

4. Note that do not use rem conversion for text font size.

Front end adaptation scheme of mobile terminal (summary)

First, let's talk about some technical solutions for mobile terminal adaptation so far:

(1)Through media query, i.e CSS3 of meida queries
(2)Represented by tmall Homepage flex Elastic layout
(3)Represented by Taobao home page rem+viewport zoom
(4)rem mode

Adapt to responsive layout and use media query. For details, please refer to bootstrap

Disadvantages: there are many redundant codes, so it is necessary to adapt multiple resolutions, and css code is written more. Unless you use a mature bootstrap framework to save some workload.

Use adaptive percentage

This method is relatively old, and the interface is not well adapted to each resolution. For example, a div displays at a resolution of 320 * 568 of 320px * 100px at a resolution of 375 * 667 of 375px * 100px, and the effect is not proportional

Summary: rem is often used. Of course, bootstrap is also commonly used. As for others, it depends on the situation

Today, I'll sum it up for you. I still have work to do. If this article can help my friends, you remember to praise and comment on the author. It's not easy to create. Give more support and refueling.