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 标签使用
• 开发过程中可以直接按照设计稿像素值编写，插件会自动转换

以上方法可以单独使用，也可以组合使用，根据项目需求选择最适合的方案。