使用Rem单位在Nuxt.js项目中实现移动端适配

随着移动设备的广泛使用，开发者们面临一个共同的挑战：如何在各种不同屏幕尺寸和分辨率的设备上提供一致的用户体验。Rem 单位是一种相对于根元素的长度单位，通过它可以实现相对于页面根元素的动态大小调整，非常适合移动端适配。那么我们在 Nuxt.js 项目中如何配置呢？

下面是实践项目，真实可用！！！

1. nuxt.config.js

2. 配置PostCSS插件

postcss: {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 1rem = 37.5px, 适用于设计稿宽度为750px
      propList: ['*']
    }
  },
  preset: {
    autoprefixer: true
  }
}

这里的rootValue设置为37.5，是因为一般移动端设计稿是以750px宽度为基准，而1rem等于设计稿中的100px。

3. flexible.js 文件

为了进一步确保移动端适配，我们引入flexible.js，这个文件主要负责设置viewport的缩放比例，以适应不同屏幕大小的设备。

见文件flexible.js

4. 引入amfe-flexible库

为了简化viewport设置的过程，我们引入amfe-flexible库。在plugins目录下创建lib-flexible.js文件，并在其中引入该库：

import 'amfe-flexible'

见文件flexible.js

总结

具体详见项目开源项目 mall，项目真实可用，已在真实的产品中应用。希望对你有所帮助，也欢迎在评论区一起讨论！