vue2移动端适配 -- px转rem

我们再写移动端网页的使用，当我们拿到750px大小的蓝湖ui图，此时我们该如何让它能和移动端适配呢？

第一步：我们需要下载两个插件：'amfe-flexible' 和 'postcss-pxtorem'

npm install amfe-flexible postcss-pxtorem --save

amfe-flexible 是一个用于设置 rem 基准值的库，它能够根据屏幕尺寸动态地调整 rem 的值，从而达到移动端自适应的目的。

postcss-pxtorem 则是一个 PostCSS 插件，它会将 CSS 中的 px 值自动转换为 rem 值，同时也支持指定 px 和 rem 的转换比例、指定不需要转换的属性等功能，让我们可以方便地进行移动端适配。

综合使用 amfe-flexible 和 postcss-pxtorem 可以很方便地实现移动端适配，而不必为不同屏幕尺寸写不同的样式代码。

第二步：到 main.js中引入amfe-flexible包

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
...
// 引入 amfe-flexible
import 'amfe-flexible';

第三步：在根目录中创建一个 postcss.config.js 文件 并写入以下代码

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 设计稿宽度的 1/10，例如设计稿宽度为 750px，则 rootValue 为 75
      propList: ['*'],
    }
  }
}

此时我们就完成了移动端的适配并让px转化为rem。