vue项目中将px转为rem

Vue项目自动px转rem实现

最新推荐文章于 2024-06-26 11:01:04 发布

原创

最新推荐文章于 2024-06-26 11:01:04 发布 · 795 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了在Vue项目中如何实现px到rem的自动转换，包括设置根节点font-size，引入rem.js以及在vue.config.js中的配置步骤，使得项目运行后能自动将px单位转换为rem。

之前在写项目的时候，封装了一个css,用来将px转rem,后来发现这样写还不是很友好，那么有没有一种方法是将我写的px项目运行后自动转为rem的呢，答案肯定是当然有了。

1.设置根节点的font-size

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

我将此css放置的位置如下图所示：

2.在main.js中引入rem.js

import './config/utils/rem'

3.在vue.config中配置

 css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 16, // 换算的基数
            selectorBlackList: [], // 忽略转换正则匹配项
            propList: ['*'],
          }),
        ]
      }
    }
  },

此时打开浏览器发现已经将px全部转为rem啦。