【vue---pc端自适应】使用lib-flexible和postcss-pxtorem实现pc端适应不同分辨率

最新推荐文章于 2024-06-03 20:21:49 发布

哇。

最新推荐文章于 2024-06-03 20:21:49 发布

阅读量2.3k

点赞数 5

文章标签： vue.js postcss javascript

本文链接：https://blog.csdn.net/qwe_ee/article/details/126582199

版权

前言

一个努力学习的小菜鸡一枚，通过记录的方式巩固一下浅薄的记忆力~ 如果有遇到同样的问题希望也可以帮助到大家~

开始叭~

使用的是vue-cli5+vue2

安装

安装lib-flexible 和 postcss-pxtorem

npm install lib-flexible --save
npm install postcss-pxtorem --save

配置lib-flexible

因为lib-flexible会根据屏幕生成相对的meta标签，所以我们在index.html文件中删除meta标签(如果使用的是amfe-flexible则不需要删除)
在这里插入图片描述

因为本需求需要适应的是pc端，而lib-flexible本身是为了方便移动端，所以需要修改部分代码。
我们可以在node_modules中找到lib-flexible文件夹下的flexible.js文件
在这里插入图片描述
找到其中的refreshRem方法

修改为：

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;
    }

由于项目是多人开发，为了方便不用每个人都修改，我把lib-flexible文件夹复制出来放到了src文件夹下面，并在main.js中引入（如果直接在node_modules修改就正常引入就可以）
在这里插入图片描述

main.js 文件

import './lib/lib-flexible'   //复制出来放在src文件夹下
//import 'lib-flexible'    //直接在node_modules中修改

配置postcss-pxtorem

我最开始用的是postcss-px2rem，结果狂报错！rem计算不准确，配置报错等各种问题！！！

css.loaderOptions

向 CSS 相关的 loader 传递选项，在这里配置postcss，具体请移至官网

参考：Vue Cli #css.loaderOptions

vue.config.js

css: {
    loaderOptions: {
      postcss: {
        postcssOptions:{
          plugins: [
            // 把px单位换算成rem单位
            require("postcss-pxtorem")({
              rootValue: 192, // 换算的基数 375的设计稿，换算基数就是37.5 ,本项目是1920，则192
              propList: ["*"], //可以从px更改为rem的属性。
              // selectorBlackList: [".el"],// 要忽略的选择器并保留为px。
              minPixelValue: 2 // 设置要替换的最小像素值。
            })
          ]
        }
      },
    }
  },

参数说明（其他没用到属性未作说明）

1.rootValue（Number | Function）表示根元素字体大小或根据input参数返回根元素字体大小。
2.propList （Array）可以从px更改为rem的属性。
—使用[“*”]表示匹配所有
3.selectorBlackList （Array）要忽略的选择器，保留为px。
4.minPixelValue （Number）设置要替换的最小像素值。