31-React杂记(移动端适配)

移动端适配

npm i amfe-flexible postcss-pxtorem -S

amfe-flexible 用于设置根字体大小的
postcss-pxtorem 用来自动转换单位的

npm i @craco/craco -S

package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

项目的根目录下建立 craco.config.js

module.exports = {
    style: {
          postcss: {
              mode: 'extends',
              loaderOptions: (postcssLoaderOptions, { env, paths }) => {
                  postcssLoaderOptions.postcssOptions.plugins = [
                      ...postcssLoaderOptions.postcssOptions.plugins,
                      [
                          'autoprefixer',
                          {
                              overrideBrowserslist: [
                                  'last 2 version',
                                  '>1%',
                                  'Android >= 4.0',
                                  'iOS >= 7'
                              ]
                          }
                      ],
                      [
                          'postcss-pxtorem',
                          {
                              rootValue ({ file }) {
                                  // return file.indexOf('antd-mobile') > -1 ? 37.5 : 75;
                                  return 37.5;
                              },
                              unitPrecision: 2, //只转换到两位小数
                              propList: ['*']
                          }
                      ]
                  ];
                  return postcssLoaderOptions;
              }
          }
      },  
  }