如何进行各个终端的页面适配(react项目安装插件 postcss-px-to-viewport)

一般我们都是按着UI稿的尺寸来写固定的px 这个习惯。

我们可以引用插件来做。（以reactApp为例）

插件是 postcss-px-to-viewport

1、先安装这个插件这个插件会自动将样式文件中的 px 转换为 vw

javascript 复制代码

npm i postcss-px-to-viewport

2、在webpack的配置文件中（webpack.config.js），引入这个插件，并进行配置。

(1)、先导入插件

javascript 复制代码

// pxToVw
const postcsspxtoviewport = require('postcss-px-to-viewport')

（2）、再进行配置在 getStyleLoaders（）中配置

javascript 复制代码

 const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? { publicPath: '../../' }
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
            ident: 'postcss',
            config: false,
            plugins: !useTailwind
              ? [
                'postcss-flexbugs-fixes',
                [
                  'postcss-preset-env',
                  {
                    autoprefixer: {
                      flexbox: 'no-2009',
                    },
                    stage: 3,
                  },
                ],
                // Adds PostCSS Normalize as the reset css with default options,
                // so that it honors browserslist config in package.json
                // which in turn let's users customize the target behavior as per their needs.
                /核心代码/        
                'postcss-normalize',
                postcsspxtoviewport({
                  unitToConvert: 'px', // 要转化的单位
                  viewportWidth: 750, // UI设计稿的宽度
                  unitPrecision: 6, // 转换后的精度，即小数点位数
                  propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换        
                  viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
                  fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
                  selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
                  minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
                  mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
                  replace: true, // 是否转换后直接更换属性值
                  landscape: false // 是否处理横屏情况
                })
              ]
              
              : [
                'tailwindcss',
                'postcss-flexbugs-fixes',
                [
                  'postcss-preset-env',
                  {
                    autoprefixer: {
                      flexbox: 'no-2009',
                    },
                    stage: 3,
                  },
                ],
              ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            root: paths.appSrc,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
          },
        }
      );
    }
    return loaders;
  };

在上例的配置中，页面的参考宽高为 750 1624

这个可以根据设计稿的宽高来，这样方便！