vue项目中将px转为rem

最新推荐文章于 2024-07-27 10:45:43 发布

翟敏1201

最新推荐文章于 2024-07-27 10:45:43 发布

阅读量702

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chaitong2204/article/details/102565280

版权

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

摘要由CSDN通过智能技术生成

之前在写项目的时候，封装了一个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啦。