react移动端项目之使用amfe-flexable和postcss-pxtorem适配屏幕

一.问题背景：

　　不同手机屏幕的分辨率是不一样的，我们写的一份react代码（一般是按照设计稿的750px去写代码）在不同手机屏幕展示就会出现样式问题，为了将一份代码在不同手机屏幕上呈现出一样的布局样式，我们就要做移动端屏幕适配。

二.怎么做移动端适配？　

　　1.使用第三方库：amfe-flexable和postcss-pxtorem

　　2.amfe-flexable库是根据手机屏幕的分辨率自动设置根字体font-size的大小。源码是将手机屏幕的宽除以10，就得到了根字体font-size。核心源码如下：

　　

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

 

　　3.postcss-pxtorem是postcss的一个插件，该插件根据rootValue自动将css文件的px值转化成rem。（源码地址：https://github.com/cuth/postcss-pxtorem）

　　例如100px会被转化成100/16=6.25rem插件配置项如下：

{
    rootValue: 16,
    unitPrecision: 5,
    propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
    selectorBlackList: [],
    replace: true,
    mediaQuery: false,
    minPixelValue: 0,
    exclude: /node_modules/i
}

三.react项目如何配置amfe-flexable和postcss-pxtorem

　　1.使用react脚手架create-react-app创建reactx项目

　　2.安装craco构建工具，该工具用于替换customize-cra + react-app-rewired，使用配置的方式改变webpack值。官方文档：https://craco.js.org/docs/

　　3.在项目根目录下面创建craco.config.js文件，并配置webpack。如下图

const path = require("path");
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
// craco工具的craco/antd插件自带less处理和antd的按需加载，无须在自己的项目中重新配置
const CracoAntDesignPlugin = require("craco-antd");


module.exports = {
  // 初始化webpack配置实例
  // 配置参考：https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration-file
  webpack: {
    alias: {
    "@": path.resolve(__dirname, "./src")
    },
    plugins: {
      // antd 使用dayjs替换 moment 的插件
      add: [new AntdDayjsWebpackPlugin()] /* An array of plugins */,
      remove: [] /* An array of plugin constructor's names (i.e. "StyleLintPlugin", "ESLintWebpackPlugin" ) */,
    }
  },
  // webpack里面的babel配置
  babel: {
    plugins: [
      // styled-components-px2rem是babel插件，用于将styled-components组件里面的px转化成rem
      [
        "styled-components-px2rem", {
          // 基准值（根元素fontSize）: 1rem = 37.5px
          rootValue: 37.5,
          // 保留小数点的精度
          unitPrecision: 3,
          minPixelValue: 0,
          multiplier: 1,
          transformRuntime: true
        }
      ]
    ],
  },
  devServer: {
    hot: true,
    // stats: {
    //   timings: true,
    //   colors: true,
    //   performance: true,
    //   overlay: true,
    // },
    // noInfo: false,4
  },
  // webpack里面对css处理的loader
  style: {
    postcss: {
      loaderOptions: {
        postcssOptions: {
          // ident: "postcss",
          plugins: [
            ["postcss-preset-env",{}],
            // require("postcss-px2rem")({remUnit: 16})
            // 详情参阅：https://github.com/cuth/postcss-pxtorem
            ["postcss-pxtorem", {
                rootValue: 37.5,
                unitPrecision: 5,
                propList: ["*"],
                selectorBlackList: [],
                replace: true,
                mediaQuery: false,
                minPixelValue: 0,
                exclude: /node_modules/i
              }
            ]
          ]
        }
      }
    }
  },
  // craco工具的插件
  // 详情：https://craco.js.org/plugins/
  plugins: [
    {
      plugin: CracoAntDesignPlugin
    }
  ]
};

　　4.最后启动项目，就可以看到px已经转化成reml了

　　

四.附一份react项目是package.json所使用的第三方库的版本

{
  "name": "zhihu-new",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^7.1.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.36",
    "@types/react": "^18.2.12",
    "@types/react-dom": "^18.2.5",
    "@types/styled-components": "^5.1.26",
    "amfe-flexible": "^2.2.1",
    "antd-dayjs-webpack-plugin": "^1.0.6",
    "antd-mobile": "^5.31.1",
    "babel-plugin-import": "^1.13.6",
    "babel-plugin-styled-components-px2rem": "^1.5.5",
    "craco-antd": "^2.0.0",
    "postcss-pxtorem": "^6.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "styled-components": "^6.0.0-rc.3",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}