Vue CLI 3.0 移动端自适应方案 - 使用 postcss-pxtorem 实现

Vue CLI 3.0 移动端自适应方案 - 使用 postcss-pxtorem 实现

Vue CLI 3.0 的移动端自适应主要依赖于 postcss-pxtorem 插件，它可以将 px 单位转换成 rem 单位，从而实现适配不同屏幕大小的移动设备。

步骤

1. 安装 postcss-pxtorem 插件：

npm install postcss-pxtorem --save-dev

2. 创建 postcss.config.js 文件并配置：

在项目根目录下创建 postcss.config.js 文件，并添加以下内容：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 基准值，需要根据设计稿调整
      propList: ['*'],
      selectorBlackList: ['van'] // 排除 vant 组件库中的样式
    }
  }
}

3. 在 vue.config.js 中配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 基准值，需要根据设计稿调整
            propList: ['*'],
            selectorBlackList: ['van'] // 排除 vant 组件库中的样式
          })
        ]
      }
    }
  }
}

4. 在项目中使用 px 单位：

div {
  width: 100px;
  height: 100px;
  font-size: 14px;
}

这样就可以自动转换成 rem 单位了。

注意事项

• 基准值: 这里的基准值需要根据设计稿调整。一般来说，设计稿的宽度是 750px，而移动端设计稿一般会以 iPhone6/7/8 为基准，即 375px，所以基准值应该设置为 37.5。如果设计稿宽度不同，需要根据实际情况调整。
• 排除 vant 组件库样式: 由于 vant 组件库中的样式已经适配了移动端，所以需要排除掉，否则会出现样式错乱的问题。

通过以上步骤，您就可以轻松地将 Vue CLI 3.0 项目适配到移动端，并获得更好的用户体验。