vue项目中px转rem方法（pc端）

2024-07-08 05:49| 来源: 网络整理| 查看: 265

首先安装这两个插件

npm install postcss-px2rem-exclude npm install postcss-px2rem npm install px2rem-loader

安装好了之后新建一个文件

postcss.config.js

文件内容如下

// postcss.config.js 文件 module.exports={ plugins:[ require("postcss-px2rem-exclude")({ remUnit: 16, // 配置1rem = 16px exclude: /node_modules/ }), ] }

然后再新建一个.js文件初始化页面配置

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

然后在main.js 引用

// main.js import './utils/rem'

然后重新编译即可

【本文地址】

公司简介

联系我们