大屏+手机适配方案

最近做了一个大屏的项目，需要与手机端适配，在各大论坛搜寻和大神的指导下之后找到了解决方案。

大屏

第一步：先下包，这里用到lib-flexible和postcss-pxtorem

直接下载postcss-pxtorem的话会报错，所以这里我们下载指定版本postcss-pxtorem@5.1.1 

1、npm下载

npm install lib-flexible --save-dev                                 //npm下载依赖

npm install postcss-pxtorem@5.1.1 --save-dev           //自动把px转成rem

2、yarn下载

yarn add lib-flexible                                                        //yarn下载依赖

yarn add postcss-pxtorem@5.1.1                                  //自动把px转成rem

第二步：在main.js引入

 import 'lib-flexible'

 第三步：修改lib-flexible源文件配置

function refreshRem(){

        var width = docEl.getBoundingClientRect().width;

        if (width / dpr < 540) {

                width = 540 * dpr; }

        else if(width / dpr > 1980){

                width = 1980 * dpr

         }

        var rem = width / 10;

        docEl.style.fontSize = rem + 'px';

        flexible.rem = win.rem = rem;

}

//这里只需要修改屏幕最大宽度和最小宽度即可（540和1980）

第四步：在vue.config.js里配置 

module.exports = {

css: {

    sourceMap: false,

    loaderOptions: {

      css: {

        // options here will be passed to css-loader

      },

      postcss: {

        // options here will be passed to postcss-loader

      },

    },

  },

 }

第五步：在vue.config.js同级新建postcss.config.js 

 module.exports = {

        plugins: {

                'postcss-pxtorem': {

                        rootValue: 192,           //移动端这里的rootValue可以根据设计稿的大小/10即可

                         propList: ['*'],

                },

        },

}

最后

重新启动项目就OK