vue实现rem适配
vue实现rem适配的方法
安装postcss-pxtorem插件
在项目根目录下运行命令安装插件：
npm install postcss-pxtorem -D配置postcss.config.js
在项目根目录创建或修改postcss.config.js文件：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // 设计稿宽度/10，如375设计稿就写37.5
propList: ['*'],
selectorBlackList: ['.norem'] // 过滤掉.norem开头的class，不进行rem转换
}
}
}创建rem.js工具文件
在src/utils目录下创建rem.js文件：
// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 375
// 设置页面根节点字体大小
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
setRem()
}在main.js中引入rem.js
在项目入口文件main.js中添加：
import '@/utils/rem.js'编写CSS时直接使用px单位
在编写样式时直接使用px单位，插件会自动转换为rem：
.title {
font-size: 14px; /* 会自动转换为rem单位 */
}注意事项
设计稿尺寸建议使用375px宽度（iPhone6/7/8尺寸），这样rootValue设置为37.5时，1rem=37.5px。如果是750px的设计稿，rootValue应设置为75。
不需要转换的样式可以添加.norem前缀：
.norem {
border: 1px solid #ccc; /* 不会被转换为rem */
}
