实现vuepc端自适应方案
- lib-flexible + px2remLoader
- lib-flexible 阿里伸缩布局方案
- px2rem-loader:px转rem
- postcss-px2rem 对scss处理
1、安装 lib-flexible和 postcss-px2rem(命令行安装)
npm install lib-flexible --save-dev
npm i px2rem-loader --save
npm i postcss-px2rem --save
2, 引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 140
})
]
}
}
},
config.module
.rule('css')
.test(/\.css$/)
.oneOf('vue')
.resourceQuery(/\?vue/)
.use('px2rem')
.loader('px2rem-loader')
.options({ remUnit: 192 })
.end()
修改flexible.js
因为lib-flexible和 postcss-px2rem是针对移动端的源码中写死了设计方案,我们这里在安装好lib-flexible和 postcss-px2rem后全局搜索flexible.js或者refreshRem,flexible.rem总有一个能搜索到的。修改为下面的代码就可以了当然if判断是根据自己需求的
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}