pc端前端页面适应不同分辨率的问题，vue项目在pc端打开字体自适应

自适应大家得方案大多是rem，但是怎么设置rem的基础值才是关键，
较为方便的解决方案就是：
阿里可伸缩布局方案 lib-flexible
px转为rem： px2rem-loader
安装这两个插件，安装方法很简单

第一步：安装

npm i lib-flexible -S
npm i px2rem-loader -D

第二步：引入 安装好之后在main.js中引入 lib-flexible

import 'lib-flexible'//main.js

第三步：配置参数 在build/utils.js中的cssLoaders里边配置

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 37.5//这是设计稿的尺寸750/10/2
    }
  }

然后添加到generateLoaders方法的loaders数组里边

 function generateLoaders (loader, loaderOptions) {
    // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];
    const loaders =[cssLoader, px2remLoader];

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

敲黑板了，这个时候你是满足不了，在pc端自适应的，只能在大部分手机展示，因为接下来我们要改源码

第四步：修改源码 找到node_modules文件里边的lib-flexible文件夹，修改flexible.js文件

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {//这里有个插件设置的参数，当它大于540的时候最大用540适配，pc肯定大于540了，它就会以540去自适应，指定不行啊/所以怎么办，搞它
            //width = 540 * dpr;
            //修改为以宽度设置，我管你多大啊，你有多大我就有多兼容
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

搞定这时候就可以拿你的移动端项目去pc打开了