create-react-app mobile rem adaptation

Summary: I queried a lot of information when performing rem adaptation on the react mobile terminal. Baidu and CSDN have a lot of information about rem adaptation.

provided articles, but many failed to solve the problem, so I searched a lot of information, and finally realized the rem adaptation of different mobile phones.

Matching, personal records are as follows:

Realize the plate

It is mainly realized through webpack unpacking + rem configuration

unpack

The purpose of unpacking: to modify the webpack configuration

Unpack and run the command: npm run eject

show:

 The local submission command is as follows:

git add .
git commit -m '解包前'

Note: Git submission must be done before unpacking. After successful local submission, npm run eject can be executed. After successful unpacking, the project directory

A config file will be generated

 rem configuration

Installation dependencies:

npm install lib-flexible postcss-pxtorem -S 

Configure loaders

Configure in the unpacked config/webpack.config.js

// 引入postcss-pxtorem
const pxtorem = require('postcss-pxtorem')

Search postcss-loader, add pxtorem configuration item:

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',
               		//配置rem
                  pxtorem({
                    rootValue: 37.5, 
                    propWhiteList: [],
                    minPixelValue: 2,
                    exclude: /node_modules/i
                  })
                ]
              : [
                  'tailwindcss',
                  'postcss-flexbugs-fixes',
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3,
                    },
                  ],
                ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },

Note: rootValue:37.5 here means 1rem=37.5px, which is based on the design draft of 375px

flexible introduction

Introduce lib-flexible in the entry file index.js:

import 'lib-flexible'

Results presented