欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-18 14:07:48
一、安装lib-flexiblenpm install lib-flexible二、安装px2rem-loadenpm install px2rem-loader三、在项目根目录新建vue.config.js进行如下配置module.exports = { css: { sourceMap:true, loaderOptions: { postcss: { plugins: [ ....

一、安装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