移动端适配方案

移动端适配方案

方案一：viewport适配

实现：

<meta name="viewport" content="width=device-width,initial--scale=1.0">

使用viewport的原理：

视觉视口：手机窗口的大小
布局视口：网页的视口
完美视口：视觉视口等于布局视口
width=device-width：将设备视口（视觉视口）的宽度赋值给页面宽度（布局视口）
initial–scale=1.0：缩放比例为1

方案二：rem适配（根据根节点的字体大小适配）

实现：

// rem适配函数
function remRefresh(){
	let clientWidth = document.documentElement.clientWidth;
	// 将屏幕等分10份
	let rem = clientWidth / 10;
	document.documentElement.style.fontSize = rem +'px';
	document.body.style.fontSize = '12px';
}
// 监听页面渲染事件，调用rem适配函数
window.addEventListener('pageshow',()=>{
	remRefresh()
	}
)
// 函数防抖
let timeoutId;
window.addEventListener('resize',()=>{
	timeoutId && clearTimeout(timeoutId);
	timeoutId = setTimeout(() =>{
		remRefresh()
	},300)
})

方案三：使用第三方工具

lib-flexible插件
px2rem-loader插件