vue引入postcss-plugin-px2rem，px转rem

最新推荐文章于 2024-08-10 17:41:08 发布

aら　淼

最新推荐文章于 2024-08-10 17:41:08 发布

阅读量696

点赞数

分类专栏： vue 前端文章标签： vue

本文链接：https://blog.csdn.net/geniusxyt/article/details/118293064

版权

前端同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

vue

28 篇文章 1 订阅

订阅专栏

npm install --save-dev postcss-plugin-px2rem

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 16, //换算基数， 默认100  ，1 / fontsize(html) = x 原来的1px转为0.0625rem
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            // exclude: /(node_modules)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            // mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
            // minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0

            //exclude: "/node_modules/",
            // selectorBlackList: ['html', 'mint-', 'mt-', 'mpvue-', 'calendar', 'iconfont'], //在rem.js全局作用下   排除指定的文件的影响
            // propBlackList: ['border']
          })
        ]
      }
    }
  }
}

以上完成px->rem，为了某些已经以rem为单位的组件不受影响，如消息框图标，这里将rootValue设置为html默认字体大小16px（html根字体大小代表rem代表的大小，此时1rem=16px）
main.js中引入rem.js，监听窗口变化，等比例改变根fontsize达到改变rem的大小

rem.js

// 设置 rem 函数
function setRem() {
    let htmlWidth = document.documentElement.clientWidth
    // let htmlHeight = document.documentElement.clientHeight
    //得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
    // //设置根元素字体大小 937 / 16 = 58.5625 ， 937是谷歌1080 - 工具栏高度
    // htmlDom.style.fontSize = (htmlHeight / 58.5625) + 'px';
    //设置根元素字体大小 1920 / 16 = 120
    htmlDom.style.fontSize = (htmlWidth / 120) + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}