在移动端开发过程中，常常遇到这样一个尴尬的问题，设计稿的标尺大小总是大于实际开发中的大小，让前端工程师每次都要自己计算。所以查找百度找到了flexible。下面是对flexible的配置。
基于vue-cli配置移动端自适应
1、安装 flexible和 px2rem-loader
在命令行输入
npm install lib-flexible --save
npm install px2rem-loader --save
2、引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
3、添加 meta 标签
在项目根目录的 index.html 中添加如下 meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4、配置px2rem-loade
在bulid文件下的utils.js文件下
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //1rem=多少像素 这里的设计稿是750px。
}
}
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, px2remLoader] : [cssLoader]
...
}
配置完成后就可以根据你设计稿的标尺来直接用到你的代码中了
