1.前言：
使用vue開發移動端的時候，不同設備屏幕分辨率的適配是個比較頭疼的問題。可以通過插件將px轉化為rem很好的實現移動端的適配。
2.插件：
px2rem-loader：根據配置基准，自動將px轉化為rem
ib-flexible: 根據跟節點頁面視口變化而變化font-size大小。
3.實現：
3.1：插件安裝
px2rem-loader安裝： npm install px2rem-loader --save
ib-flexible:安裝：npm install lib-flexible --save
3.2：配置
build目錄下utils.js文件
const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 37.5//根據UI給的設計稿來這里以375*667為例 } }
截圖：
然后在同一個文件中（build目錄下utils.js文件）紅色的地方
function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'../../' }) } else { return ['vue-style-loader'].concat(loaders) } }
項目入口文件：index.html 添加紅色代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ctposh5</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js引入：lib-flexible/flexible： import 'lib-flexible/flexible'
