amfe-flexible和postcss-px-to-viewport如何配合使用

amfe-flexible是一个用于移动端适配库，它可以根据设备的屏幕宽度动态设置html的font-size值，从而实现页面的自适应。而postcss-px-to-viewport是一个PostCSS插件，它可以将px单位转换为vw或者vh单位，以实现移动端页面的适配。

使用amfe-flexible和postcss-px-to-viewport配合使用的步骤如下：

1. 安装amfe-flexible和postcss-px-to-viewport：

   npm install amfe-flexible postcss-px-to-viewport --save-dev

2. 在项目的入口文件中引入amfe-flexible：

   import 'amfe-flexible';

3. 在项目的构建工具中配置postcss-px-to-viewport插件。以webpack为例，需要在webpack配置文件中添加以下代码：

   const px2vw = require('postcss-px-to-viewport');

   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /\.css$/,
           use: [
             // ...
             {
               loader: 'postcss-loader',
               options: {
                 postcssOptions: {
                   plugins: [
                     px2vw({
                       viewportWidth: 750,  // 设计稿的宽度
                       unitPrecision: 5,   // 转换后的小数位数
                       viewportUnit: 'vw', // 转换的单位
                       selectorBlackList: [], // 需要忽略的选择器
                       minPixelValue: 1,    // 最小的转换数值
                       mediaQuery: false    // 是否转换媒体查询中的px
                     })
                   ]
                 }
               }
             }
           ]
         }
       ]
     }
   };

4. 在样式文件中使用px单位进行开发，插件会自动将其转换为vw或者vh单位。

通过以上步骤，amfe-flexible会根据设备的屏幕宽度动态设置html的font-size值，而postcss-px-to-viewport插件会将样式文件中的px单位转换为vw或者vh单位，从而实现移动端页面的适配。