摘要：
移动适应一直是一个大问题，现在有各种解决方案，例如rem和vw百分比。然而，对于成熟的剪切，rem更容易编写，这些剪切与根元素的字体大小成相等的比例计算。后来，淘宝的lib flexible和现在的postss在编写时都是为px编写的，将自动转换为rem。现在让我们来看看如何配置vue-cli2.x和3.x vue-cli2.x1。安装取决于npminstallpx2rem加载器--save devnpminstalllib flexible--save 2.在src/main中导入“lib flexile”。js；3.内置/utils。js，添加以下代码导出。cssLoaders=函数｛//…constpx2remLoader=｛loader:“px2rem loader”，选项：｛remUnit:75｝｝｝｝//…functiongenerateLoaders｛//添加px2remLoader constloaders=选项。是否将PostCSS添加到原始加载器？
移动端适配一直都是个大问题，现在也出现了各种各样的解决方案，比如 rem, vw 百分比等，但是比较成熟的切比较容易编写的还是 rem，他是相对于根元素的 font-size 进行等比例计算的。
但是我们在编写css的时候，需要计算每一个元素相对于根元素的rem值是多少。会比较麻烦，并且维护起来也不方便。那么社区也出现了各种解决方案。
早期的解决方案是利用 sass 或者less编写函数进行自动转换。到后来淘宝的lib-flexible，再到现在的 postcss，都是为了编写的时候写的是px，会自动转为 rem。下面我们就来看下vue-cli2.x 和 3.x 如何去配置。
vue-cli2.x
1. 安装依赖
npm install px2rem-loader --save-dev
npm install lib-flexible --save2. 在 src/main.js 中引入
import 'lib-flexible';
3. 在 build/utils.js 中加入以下代码
exports.cssLoaders = function (options) { // ... const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } // ... function generateLoaders (loader, loaderOptions) { // 在原来的loader添加上px2remLoader const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] // ... } }
4. 如果想要页面的viewport缩放则需要将 index.html 中注释掉原来的设置
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- 官方上说是要把这里注释掉 此处注释掉之后，lib-flexible 会根据不同的屏幕自动添加，比如2倍屏这里就是 0,5 但是，我这用的时候有点坑。。 如果将此注释掉，在某些需要写 px 的地方，就会出现在不同的屏幕上看到的 大小不一样的问题，因为缩放的比例不同了。比如富文本渲染，就得用px 解决办法是使用不注释此代码，在任何手机上都是按照1倍进行缩放。。px2remloader会自动计算，不会有问题
这里看各自项目的需要吧 -->
vue-cli 3.x
1. 下载依赖
npm install postcss-pxtorem --save-dev // 此处和2.x 不一样的插件 npm install lib-flexible --save
2. 在 src/main.js 中引入
import 'lib-flexible/flexible.js'; // 此处和2.x不一样
3. 在package.json中配置
// 在最后添加此脚本 { "postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 75, "propList": [ "*" ] } } } }
4. 如果想要页面的viewport缩放则需要将 public/index.html 中注释掉原来的设置， 通上面的第四步
demo 可参考本人的配置