使用lib-flexible和postcss-pxtorem解决大屏适配问题

5,149 阅读2分钟

1、先安装lib-flexible和postcss-pxtorem

可以直接按照以下命令安装即可(一定要严格控制版本号,以下版本可以完美解决依赖冲突问题)
npm install lib-flexible@0.3.2 postcss-pxtorem@5.1.1 --save-dev
cnpm install lib-flexible@0.3.2 postcss-pxtorem@5.1.1 --save-dev(这个是针对配置了淘宝镜像的安装方法)

2、项目中进行一些配置

在我的项目根目录新建vue.config.js文件;

// 拼接路径
const resolve = dir => require('path').join(__dirname, dir)
// 基础路径 注意发布之前要先修改这里
let publicPath = '/'
module.exports = {
  publicPath: publicPath, // 根据你的实际情况更改这里
  lintOnSavetrue,
  assetsDir'static',
  devServer: {//这个是解决跨域问题,配置的代理表
    publicPath: publicPath, // 和 baseUrl 保持一致
    proxy: {
      // 测试环境
      '/ZR': {
        target'http://10.111.113.8:8086'// 测试
        // target: 'http://122.114.247.4:8769', // 正式
        changeOrigintrue,
        pathRewrite: {
          '^/ZR'''
        }
      }
    }
  },
  css: {//这个是真正解决大屏适配有关的代码
    sourceMapfalse,
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        // options here will be passed to postcss-loader
        plugins: [require('postcss-pxtorem')({
          "rootValue"192// 设计稿宽度的1/10,(JSON文件中不加注释,此行注释及下行注释均删除)
          "propList": ["*"// 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
        })]
      }
    }
  },
}

上面就是我的vue.config中的简单配置,其中最重要的css对象中的配置。

3、引入lib-flexible

main.js中引入import 'lib-flexible/flexible'

微信截图_20211220103229.png

4、还需要修改的两个坑

(1)、因为lib-flexible是针对移动端的但是我现在是在pc端用,所以直接用的话,会无效,这里也是查了好久才知道要修改他这个插件的源码。

在node_modules->lib-flexible->flexible.js

找到refreshRem 函数修改成下面这样(注释掉refreshRem函数中的if有关的东西)

微信截图_20211220103508.png

微信截图_20211220103601.png 完成以上步骤,就可以这样直接在项目中使用px布局。 注意:要是项目重新install(安装依赖),flexible.js 这里也要重新修改。

(2)、如果有echarts图,整体适配用的又是lib-flexible插件,那再做echarts图适配的时候需要下面这种写法来做适配:

image.png 代码如下:

window.addEventListener("resize"function () {
   setTimeout(() => {
      myChart && myChart.resize();
   }, 400);
})

(1)注意:一定要加一个定时器,并且定时器的时间一定要大于300ms;

(2)、不加定时器的问题:如果不按照“(1)”那样做会出现的问题是,每次屏幕变化,这次echarts图的变化是基于上一次大屏幕的变化而变化的,总是慢一个节奏。 (3)、出现“(2)”中问题的原因如下:

image.png

因为lib-flexible插件做的适配是有一个300ms延迟器的,所以你在做echarts适配的时候要加一个大于300ms的延时器。

5、项目效果展示

微信截图_20220726123044.png