H5移动端适配方案

一、介绍
flexible：
1.github地址：https://github.com/amfe/lib-flexible

2.介绍：flexible.js是手淘开发出用来适配移动端的js框架，在不同的设备实现页面适配

3.核心原理：flexible将页面分为十份，根据不同设备width给网页中html根节点设置不同的font-size,所有px都用rem代替

rem：
1.介绍：rem（font size of the root element）是指相对于根元素的字体大小的单位

二、插件介绍
postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位 【最好>5.0.0版本】

lib-flexible 用于设置 rem 基准值

三、项目中使用
1、安装
npm install lib-flexible --save
​
// or
​
pnpm install lib-flexible --save
2、main.js中引入
import ‘lib-flexible/flexible.js’
3、viewport设置

4、修改源码适配更大屏幕
原因：源码中设定最大屏幕为540px，超出的仍按照540px进行计算，因为H5有时会需要在pc进行显示，所以将写死的540px改为动态的

文件路径：node_modules/lib-flexible/flexible

源函数:

function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + ‘px’;
flexible.rem = win.rem = rem;
}
需改为：

function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
// width不写死
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + ‘px’;
flexible.rem = win.rem = rem;
}
5.安装postcss-pxtorem 插件
npm install postcss postcss-pxtorem --save-dev
​
or
​
// 推荐使用pnpm作为包管理器
pnpm install postcss postcss-pxtorem --save-dev
​
6.配置 postcss.config.js(没有则新建)
// postcss.config.js
module.exports = {
plugins: {
‘postcss-pxtorem’: {
rootValue: 37.5, //根据设计稿自行调整
propList: [‘*’],
},
},
};

四、注意事项
1.若是用 以下命令下载px2rem

npm i postcss-px2rem --save -dev

要记得下载多个 px2rem-loader

npm install px2rem-loader

且配置方式不同 需在vue.config.js-webpack

// 引入等比适配插件
const px2rem = require(‘postcss-px2rem’)

// 配置基本大小
const postcss = px2rem({
// 基准大小 baseSize，需要和rem.js中相同
remUnit: 16,
})

// 配置基本大小
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
modifyVars: {
hack: true; @import "${publicVariate}"; @import "${publicMixin}";,
},
},
postcss: {
plugins: [postcss],
},
},
},

}