移动端适配

前言

适配是在移动端不可缺少的一个操作，手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。

利用postcss-px-to-viewport包解决

步骤

1. 安装 px 转 vw 的包：npm i -D postcss-px-to-viewport

2. 在 craco.config.js 添加相应配置

3. 重启项目，让配置生效

craco.config.js 中

const pxToViewport = require('postcss-px-to-viewport')
const vw = pxToViewport({
  // 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）
  viewportWidth: 375
})

module.exports = {
  // 此处省略 webpack 配置
  webpack: {},

  // 这里补充style配置
  style: {
    postcss: {
      plugins: [vw]
    },
    // postcss8的新写法
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins:[vw]
        }
      }
    }
  }
}

上述操作实现不了则看一下操作

注意版本兼容性问题(不用了)

react脚手架中的react-scripts升级到5.0版本，其内部的webpack也升级到了5.0（webpack5.0中对postcss的配置和当前的postcss-px-to-viewport的配置不兼容）

我们目前采用的第三方的工具@craco/craco来对webpack进行配置，而它并没有及时给出配套的升级方案。目前官方仍然没有解决。

所以，可以选择：退回到"react-scripts": "^4.0.3", "@craco/craco": "^6.4.2",

参考package.json

{
  "name": "geek-h5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.3.2",
    "ahooks": "^2.10.14",
    "antd-mobile": "^5.0.0-rc.0",
    "axios": "^0.24.0",
    "dayjs": "^1.10.7",
    "dompurify": "^2.3.4",
    "highlight.js": "^11.3.1",
    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^5.3.0",
    "react-scripts": "^4.0.3",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "socket.io-client": "^4.4.0",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@craco/craco": "^6.4.2",
    "@types/dompurify": "^2.3.1",
    "@types/lodash": "^4.14.177",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "eslint": "^7.32.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.1",
    "eslint-plugin-react": "^7.27.1",
    "postcss-px-to-viewport": "^1.1.1",
    "sass": "^1.43.5"
  }
}