在移動端開發過程中，常常遇到這樣一個尷尬的問題，設計稿的標尺大小總是大于實際開發中的大小，讓前端工程師每次都要自己計算。所以查找百度找到了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]
...
}
配置完成后就可以根據你設計稿的標尺來直接用到你的代碼中了
