Mobile adaptation, is a platitude of the problem, specific knowledge and theoretical knowledge, I will not say, we can refer to the following article

Stop asking me about mobile fit

Super detailed REM + VW mobile screen adaptation scheme

Rem VW less device, independent pixels, etc

Rem adaptation

Remember that rem is the fontSize of the HTML tag, i.e. 1rem=html.style.fontSize

We started with the iPhone 6/7/8 as a base for other screens

Take iPhone 6/7/8 for example, device width 375px(device-independent pixels, CSS pixels)

1. Create the following directory

2. Dynamic calculation of REM

Less. Js and home.less are introduced in home.html, and rem is dynamically computed in the head tag as follows


      
<html lang="zh-CN">
	<head>
	    <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" >		
		<link rel="stylesheet/less" href="css/home.less" />
		<title>Home page</title>
		<script >
		    // Execute the function immediately() (function(){
				// Dynamically calculate REM, using a screen width of 375px as an example
				function resetRem(){
					//1. Get the HTML tag
					var html=document.body||document.documentElement;
					//2. Get the width of the HTML tag and limit the maximum width
					var htmlWidth=html.getBoundingClientRect().width;
					if(htmlWidth>768){
					    htmlWidth=768
					}
					//3. Calculate rem dynamically, divide the screen width into 15 parts (20, 25, 30, integers are easy to calculate), and each part is 1rem
					html.style.fontSize = htmlWidth / 15 + "px";  // this is 1rem=25px= html.style.fontsize
				}
				
				//4. Called when the page loads
				resetRem();				
				//5. Call again when the page size changes
				window.onresize=function(){ resetRem(); }})</script>
	</head>

	<body>
		
		<div class="box">Test box</div>
	
		<script src="js/less.js"></script>	
	</body>

</html>
Copy the code
3. Use less. Js to convert PX to REM

We divided the screen into 15 parts and calculated that 1rem=25px

So we define the variable @r:25rem in home.less

Note that if it is not divided into 15 parts, say 20 parts, then 1rem=375/20=18.5px, then the variable @r:18.5rem,; If it is divided into 25 parts, then 1rem=375/25=15px, then the variable @r:15rem

Then set the. Box style to 200px wide and 300px high

200/25rem=8rem

300/25rem=10rem

Divide the width and height by the variable @r to get the size in rem

@r:25rem;
 .box {
     width: 200/@r; //8rem
     height: 300/@r; //12rem
     background-color: red;
 }
Copy the code

The current 1rem=25px is calculated with a screen size of 375px

That is, 1rem=html.style.fontSize= current screen width/number of copies

//3. Dynamically calculate rem, divide the screen width into 15 parts (20 parts, 25 parts, 30 parts, integer is easy to calculate), each part size is 1rem html.style.fontSize = htmlWidth / 15 +"px"; // this is 1rem=25px= html.style.fontsizeCopy the code

So every time there’s a change in screen width (different phone type)

Rem is recalculated so that the rem value we get is dynamically calculated based on the current screen width, which can be adapted to multiple phone screens

4. Open the browser to view the style

Iphone6/7/8

IPhone 6/7/8 Plus

Samsung S5 under the style

As you can see, width and height are 8REM and 10REM on different screens. As for setting other properties, such as font, margin, positioning, etc., as long as you know the size of PX, you can set width and height according to the way.

Vw adaptation

Take iPhone 6/7/8 for example, device width 375px(device-independent pixels, CSS pixels)

Remember: 100vw= current screen width =375px

So: 1vw=3.75px=1%* current screen width

1. Use less. Js to convert PX to VW

Define a variable @v=3.75vw in home.less

Then set the.box style to 300px wide and 300px high

Divide the width and height by the variable @v to get the beat size in vw

@ v: 3.75 vw; .box { width: 300/@v; height: 300/@v; background-color: blue; }Copy the code
2. Open the browser to view the style

Iphone6/7/8

IPhone 6/7/8 Plus

Samsung S5 under the style

On different screens, width and height are 80vw, and 1vw=1%* the current screen width, so it works on any phone

conclusion

Rem adaptation
  • Advantages: Good compatibility
  • Disadvantages: NEED JS dynamic calculation, relatively tedious
Vw adaptation
  • Advantages: Super simple setup, combined with a variable less/sass
  • Cons: Low compatibility (seems to be compatible with today’s phones)
advice

Adaptation there is no silver bullet, no optimal solution, the above is just the simplest adaptation method, and I am also a rookie, moving bricks