Vue项目实现rem

Vue项目实现rem适配方案

在Vue项目中实现rem适配，主要通过动态设置根元素的font-size值，使页面元素能够根据屏幕尺寸自适应调整。以下是具体实现方法：

安装postcss-pxtorem插件

npm install postcss-pxtorem -D

在项目根目录下创建或修改postcss.config.js文件：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // 基准值，1rem=16px
      propList: ['*'], // 需要转换的属性
      selectorBlackList: [] // 不转换的选择器
    }
  }
}

创建rem工具函数

在src/utils目录下创建rem.js文件：

// 设置根元素font-size
function setRem() {
  const docEl = document.documentElement
  const width = docEl.clientWidth
  const rem = width / 10
  docEl.style.fontSize = rem + 'px'
}

// 初始化
setRem()

// 监听窗口变化
window.addEventListener('resize', setRem)

在main.js中引入rem工具

import '@/utils/rem'

设计稿尺寸处理

假设设计稿宽度为750px，在postcss.config.js中设置：

rootValue: 75, // 750px设计稿时设为75，1rem=75px

CSS中使用rem单位

.container {
  width: 10rem; /* 750px设计稿中750px宽度 */
  height: 5rem; /* 750px设计稿中375px高度 */
}

注意事项

• 移动端项目需要在public/index.html中添加viewport meta标签：

  

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 对于不需要转换的样式，可以使用PX单位（大写）避免被转换：

  .not-transform {
  font-size: 16PX; /* 不会被转换为rem */
  }

• 部分UI框架可能需要额外配置，如Vant需要设置rootValue: 37.5