实现vuepc端自适应方案

实现vuepc端自适应方案

1. lib-flexible + px2remLoader
2. lib-flexible 阿里伸缩布局方案
3. px2rem-loader：px转rem
4. postcss-px2rem  对scss处理

 

1、安装 lib-flexible和 postcss-px2rem（命令行安装）
　　　　npm install lib-flexible --save-dev

　　　　npm i px2rem-loader --save

 

　　　　npm i postcss-px2rem --save

2, 引入lib-flexible
在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'

 

 

 

 

css: {

    loaderOptions: {

      css: {},

      postcss: {

        plugins: [

          require('postcss-px2rem')({

            remUnit: 140

          })

        ]

      }

    }

},

 

 

 

 

 

config.module

      .rule('css')

      .test(/\.css$/)

      .oneOf('vue')

      .resourceQuery(/\?vue/)

      .use('px2rem')

      .loader('px2rem-loader')

      .options({ remUnit: 192 })

      .end()

 

 

 

修改flexible.js
因为lib-flexible和 postcss-px2rem是针对移动端的源码中写死了设计方案，我们这里在安装好lib-flexible和 postcss-px2rem后全局搜索flexible.js或者refreshRem，flexible.rem总有一个能搜索到的。修改为下面的代码就可以了当然if判断是根据自己需求的

 

 

function refreshRem(){

        var width = docEl.getBoundingClientRect().width;

        if (width / dpr > 540) {

            width = width * dpr;

        }

        var rem = width / 10;

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

        flexible.rem = win.rem = rem;

    }

 

 

搜索

复制