可视化项目rem适配

最新推荐文章于 2022-12-07 10:55:27 发布

小宋i

最新推荐文章于 2022-12-07 10:55:27 发布

阅读量213

点赞数 2

文章标签： javascript vue.js node.js 前端 echarts

本文链接：https://blog.csdn.net/weixin_50641294/article/details/118519349

版权

可视化项目rem适配

1.在项目中安装插件

在这里插入代码片
npm i lib-flexible -S

2.在main.js中引入

在这里插入代码片
import ‘lib-flexible/flexible.js’

3.在vue.config.js写配置文件如果没有就新建一个

在这里插入代码片
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .resourceQuery(/\?vue/)
      .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 192   //代表的是 1rem = ？px  这里假设设计稿是 1920px ，那么这里的比例就是 1/10
      })
      .end()
  }
}

4.到这里还差一点点我们在node资源包里找到lib-flexible文件里面的flexible.js修改一下代码

function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          //  width = 540 * dpr;   就是这里的问题，需要将 540 修改为 width，不将宽度写死就ok了。
          width = width * dpr;
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }