Vue项目实现rem
Vue 项目中实现 rem 适配方案
在 Vue 项目中实现 rem 适配，主要目的是让页面元素根据屏幕尺寸自动调整大小。以下是几种常见方法：
使用 postcss-pxtorem 插件
安装 postcss-pxtorem 插件：
npm install postcss-pxtorem -D在项目根目录下创建或修改 postcss.config.js 文件：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
selectorBlackList: [],
minPixelValue: 2
}
}
}动态设置根字体大小
在项目入口文件（如 main.js）中添加以下代码：
function setRem() {
const baseSize = 37.5
const scale = document.documentElement.clientWidth / 375
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
setRem()
window.addEventListener('resize', setRem)使用 lib-flexible 库
安装 flexible.js 库：
npm install lib-flexible -S在 main.js 中引入：
import 'lib-flexible'在 index.html 中添加 meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">注意事项
- 设计稿通常按照 375px 宽度设计，rootValue 设置为 37.5（375/10）
- 对于不想转换的像素值，可以使用大写 PX 或配置 selectorBlackList
- 移动端项目建议配合 viewport 相关 meta 标签使用
- 开发过程中可以直接按照设计稿像素值编写，插件会自动转换
以上方法可以单独使用，也可以组合使用，根据项目需求选择最适合的方案。
