lib-flexible基于vue的cli4.x实现移动端以及大屏幕适配

一、安装lib-flexible

npm install lib-flexible  

安装完在main.js 引入     

  import 'lib-flexible' 

二、安装px2rem-loader

npm install px2rem-loader

三、在项目根目录新建vue.config.js进行如下配置

module.exports = {
  css: {
        sourceMap:true,
      loaderOptions: {
          postcss: {
              plugins: [
                  require('postcss-px2rem')({
                      // 以设计稿350为例， 350 / 10 = 35
                      remUnit: 35
                  }),
              ]
          }
      },
      modules:true
  },
};

注意点：

    到这里540以下的屏幕应该就可以适配了，由于源码的设置超过540就起不到适配的效果，所以要简单改下源码。

到node_modules找到lib-flexible下的flexible.js文件 找到refreshRem方法

  function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
            if(width / dpr < 320) {
                width = 320 * dpr;
            }else if(width / dpr > 1100){
                width = 1100 * dpr;
            }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

注释掉的if即为源码的设置，针对自己的需求修改。这里举例320-1100  修改完即可。

 

 

 

 

 

 

 

 

 

 

 

 

本文地址：https://blog.csdn.net/weixin_44491888/article/details/108147476