React移动端适配

1. 为了让我们的项目，在不同的设备下任然可以正常访问，我们通常使用rem来做适配
2. rem（font size of the root element），简单的来说，它是一个相对单位，相对于根元素font-size来计算，比如：font-size: 10px, 那么1rem = 10px
3. 看似换算如此简单，但是，ui一般出图，都是按照某一种设备的尺寸比例出图，例如iphone6（屏幕宽度：375px），如此以来，则存在着繁琐的px转rem的计算过程。
4. 为了能让设计稿适配到不同手机上，我们需要一个高效，简单的解决方案

配置

1. 下载依赖

npm i lib-flexible postcss-pxtorem -D

配置webpack

1. git提交
   1.1 git add .
   1.2 git commit -m ‘’
2. 导出webpack配置文件：npm run eject
3. 查看配置文件： config / webpack.config.js

引入配置文件

const px2rem = require('postcss-pxtorem')

更改代码后

在config/webpack.config.js中，找到postcss-loader 配置项

        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,
                  },
                ],
                //==========配置项===================================
                px2rem({
                  rootValue: 100, // 基数
                  unitPrecision: 5, // 进制位数
                  propList: ['*'] // 所有属性 都匹配rem
                }),
                // ===================================================
                // 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',
              ]
              : [
                'tailwindcss',
                'postcss-flexbugs-fixes',
                [
                  'postcss-preset-env',
                  {
                    autoprefixer: {
                      flexbox: 'no-2009',
                    },
                    stage: 3,
                  },
                ]
              ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },

在入口文件中

import 'lib-flexible'

配置完成

前端正常写入样式单位

浏览器会自动计算

不同的屏幕下会计算根元素的font-size的值

关于postcss-pxtorem的详细配置

px2rem({
	rootValue: 100, // 代表根元素字体大小或根据input参数返回根元素字体大小
    unitPrecision: 5, // （数字）允许 REM 单位增长到的十进制数字。
    propList: ['*'] // (数组）可以从 px 更改为 rem 的属性
    	/**
    		1.使用通配符*启用所有属性。例子：['*']
    		2.*在单词的开头或结尾使用。（['*position*']会匹配background-position-y）
    		3.使用!不匹配的属性。例子：['*', '!letter-spacing']
    		4.将“not”前缀与其他前缀组合在一起。例子：['*', '!font*']
    	*/
    selectorBlackList: [], // （数组）要忽略并保留为 px 的选择器。
    	/**
    		1.如果值是字符串，它会检查选择器是否包含字符串。 例如：['body'] 会匹配 .body-class
    		2.如果 value 是 regexp，它会检查选择器是否与 regexp 匹配。例如：[/^body$/]将匹配body但不匹配.body
    	*/
    replace： true, //（布尔值）替换包含 rem 的规则而不是添加回退。
    mediaQuery: false, // （布尔值）允许在媒体查询中转换 px。
    minPixelValue: 0, // （数字）设置要替换的最小像素值。
    exclude: /node_modules/i, // （字符串，正则表达式，函数）要忽略并保留为 px 的文件路径
    	/**
    		1.（字符串，正则表达式，函数）要忽略并保留为 px 的文件路径. 例如：'exclude' 会匹配 \project\postcss-pxtorem\exclude\path
    		2.如果值为正则表达式，它会检查文件路径是否与正则表达式匹配。 例如：/exclude/i 会匹配 \project\postcss-pxtorem\exclude\path
    		3、如果值为函数，则可以使用 exclude 函数返回 true，该文件将被忽略。
    	*/
}),