第一。首先下载 npm install postcss-pxtorem

Vue项目中px转化成rem方法!!!(小白求关爱)

完成下载之后,在package.json文件中添加

Vue项目中px转化成rem方法!!!(小白求关爱)

添加这段代码

“postcss”: {
“plugins”: {
“autoprefixer”: {},
“postcss-pxtorem”: {
“rootValue”: 16, // 根元素大小1rem = 16px
“propList”: ["*"]
}
}
},

在项目中创建一个utils文件夹,编写rem.js文件

Vue项目中px转化成rem方法!!!(小白求关爱)

添加下列代码

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()
}

然后下一步在main。js中进行引入调用开发即可!

Vue项目中px转化成rem方法!!!(小白求关爱)

在随便进行编写vue文件即可完成!!!转换!如下图显示

Vue项目中px转化成rem方法!!!(小白求关爱)

即完成进行换算了

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-15
  • 2021-08-06
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-12
  • 2022-12-23
  • 2021-10-28
  • 2022-12-23
相关资源
相似解决方案