The three most popular mobile adaptation techniques! ! !

Mobile terminal adaptation

Viewport labels

Make the page width equal to the device width

The default html width of the mobile page without a viewport tag is 980

<meta name='viewpoint' content='width=device-width,initial-scale=1.0'>
复制代码

There are several ways to adapt to the mobile terminal:

• Flexbox layout
• percentage layout
• rem layout
• vw / vh
• media inquiries

The most commonly used adaptation schemes:

• rem with vw
• rem with media queries

Basic usage of css media query

    @meta (width:100px){
        html{
            font-size:12px
        }
    }
    //min-height min-width max-height max-width
复制代码

Use media queries on link tags (you can control different widths to display different style sheets)

<link rel='stylesheet' href='./a.css' media="(min-width:120px)">
复制代码

Media queries are generally used to hide content on e-commerce websites.

---

After a lot of digression, I will now explain some of the most commonly used mobile terminal adaptation techniques, rem adaptation.

1. rem adaptation

First open the ideal viewport so that the layout viewport = device independent pixel value

1. rem adaptation solution 1

Taobao, Baidu usage.

core process

Basically the standard design draft (according to iphone 6 7 8) is: 375*667

So we also take the 375*667 design draft as an example

• Set the fontsize of the root tag: 100px;

• Root font = (mobile phone landscape device independent pixel value * 100) / design draft width

• When editing the style: directly in rem as the unit value: design value / 100;

//获取布局视口宽度
const dpWidth = document.documentElement.clientWidth
//计算根字体大小
const rootFonstSize = (dpWidth * 100)/375
//设置根字体大小
document.documentElement.style.fontSize = rootFonstSize + 'px'
复制代码

optimization

Use real-time adaptation to eliminate manual refresh

function adapter(){
	//获取布局视口宽度
	const dpWidth = document.documentElement.clientWidth
	//计算根字体大小
	const rootFonstSize = (dpWidth * 100)/375
	//设置根字体大小
	document.documentElement.style.fontSize = rootFonstSize + 'px'
}
adapter()
window.onresize = adapter
复制代码

2. rem adaptation scheme 2

Option 2: Generally use with less without having to calculate by yourself

How to use Sohu and Vipshop

core process

• font-size of root tag: mobile landscape device independent pixel value / 10

• When writing styles: directly in rem. The value is: design value/(design draft width/10)

function adapter(){
	//获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
	const dpWidth = document.documentElement.clientWidth
	//计算根字体大小
	const rootFonstSize = dpWidth / 10
	//设置根字体大小
	document.documentElement.style.fontSize = rootFonstSize + 'px'
}
adapter()
window.onresize = adapter
复制代码

Second, vw adaptation

• Use device width / 100vw to find how many px 1vw occupies

• Element style: width / device width / 100vw

@basic:375 /100vw;
* {
  margin: 0;
  padding: 0;
}
#demo {
  width: 345 / @basic;
  height: 150 / @basic;
  background-color: skyblue;
  margin: 0 auto;
  margin-top: 15 / @basic;
  border: 1px solid black;
}
复制代码