CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem（适用于 Webpack）

以下是一个基于 Webpack 的配置示例，用于将 postcss-pxtorem 插件集成到项目中，以支持在不同分辨率设备上自适应显示。

// webpack.config.js
const pxtorem = require('postcss-pxtorem');
 
module.exports = {
  // ... 其他webpack配置
  module: {
    rules: [
      // ... 其他loader配置
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')(), // 自动添加浏览器厂商前缀
                pxtorem({
                  rootValue: 37.5, // 设计稿宽度的1/10，这里以375px设计稿宽为例
                  propList: ['*'], // 转换所有属性
                  unitPrecision: 5, // 单位精度
                  minPixelValue: 0, // 小于或等于1px则不转换
                  mediaQuery: false, // 不转换媒体查询中的单位
                  replace: true, // 转换完成后直接更换原来的值
                }),
              ],
            },
          },
        ],
      },
      // ... 其他文件loader配置
    ],
  },
  // ... 其他配置
};

在这个配置中，postcss-pxtorem 插件被用来将 CSS 中的 px 单位转换成 rem 单位，这样就可以实现响应式布局。rootValue 设置为37.5是因为在大多数移动设备上，375px的视口宽度能够使页面以大约100%的缩放比例显示，这样有利于提高移动端页面的可读性和可操作性。