安装 lib-flexible postcss-px2rem 两个包
npm i lib-flexible --save
npm i postcss-px2rem --save
vue 在main.js 中引入,react 在index.js 中引入
import 'lib-flexible'
modul文件夹中找到 lib-flexible ->flexible.js
function refreshRem () {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr; //将540 改为width!!!!
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
react 在config文件夹下的webpack.config.dev.js文件中加入
按照比例来UI是1920就 /10 就是192
vue中 在根目录下新建 vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
// 这是rem适配的配置 注意: remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是750px的,用75就刚刚好。
plugins: [
require("postcss-px2rem")({
remUnit: 192
})
]
}
}
}
就可以实现PC,移动两端都适配了