javascript系列之屏幕适配最佳解决方案（vue部分)

---

准备工作

首先需要安装 vue-cli 脚手架，这里我安装的是 cli3。
项目初始化完成后，在项目目录中安装 lib-flexible 和 px2rem-loader。

npm install lib-flexible --save-dev
npm install postcss-px2rem --save

配置 postcss-px2rem

vue-cli3 因为减少了对于 webpack 的配置，因此有些文件就被隐藏起来了。可以在文件的根目录下新建一个 vue.config.js 文件，在这个文件里就可以自己增加或修改一些 webpack 配置。

首先添加一个新的 Loader，vue-cli 的文档中也写的非常清楚了，需要在vue.config.js中添加以下代码：

module.exports = {
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 192
          })
        ]
      }
    }
  }
};

remUnit配置项

emUnit根据设计图的尺寸/10，如设计图宽是1920，remUnit=192

此时重启服务器就生效以上配置了。但还是存在一些问题，虽然可以转换为 rem 了，但是计算出来的比例确实 1rem = 54px，这是因为 flexible.js 文件会默认写死了一个比例，我们需要作出一些修改。
在 node_moudles / lib-flexible / flexible 下

function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          //  width = 540 * dpr;   就是这里的问题，需要将 540 修改为 width，不将宽度写死就ok了。
          width = width * dpr;
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

总结

这个就是pc端适配的最佳解决方案，最好可以让某些div设置最小宽度。