react 脚手架项目快速实现 viewport移动端适配

前言

因为工作原因，一直在写后台管理系统，关于h5页面的一些适配了解的不多。这段时间刚好有空，就花时间去了解了一下h5的最近的适配方案。因为之前使用postcss-to-px2rem进行适配的，但是也有很久没有做过了，所以现在也学学其他的。

1，通过react脚手架创建一个react项目

npx create-react-app +项目名

• 因为我的node版本是18.2.0的，所以react版本下载下来就变为18.2.0的版本了
• 项目运行版本react 18.2.0

2，运行

npm run start

3，适配移动端方案 viewport

• 1, 安装插件

# 1.npm方式：
npm install postcss-loader postcss-px-to-viewport --save-dev

# 2.yarn安装：
yarn add -D postcss-loader postcss-px-to-viewport

• 2，准备暴露webpack.config.js之前，需要将代码进行保存，不然项目报错。

   git add .
   git commit -m "factory: 准备暴露webpack.config.js"

• 3，准备将 webpack.config.js 通过命令行暴露出来，此步骤不可逆，如果感觉自己的webpack暴露出现问题或者想回到之前的代码，可以使用git命令进行回滚，具体操作如下。

   git log --oneline # 查看提交记录，然后复制头部的header,如下图
   git reset --hard `版本号` #回到之前版本

• 4 暴露命令：npm run eject
  • 可能是因为react版本的不同，当进行完npm run eject这一步之后有一个报错，出现了报错信息：

  Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` env
  

  • 我的解决方案是eslintConfig 中加上 parserOptions 这段代码

 "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "parserOptions": {
      "babelOptions": {
        "presets": [
          ["babel-preset-react-app", false],
          "babel-preset-react-app/prod"
        ]
      }
    }
  },

参考链接：github issues

• 5，viewport进行配置
  找到暴露出来的 webpack.config.js,在 config 文件夹中，然后对里面的数据进行配置，如果和下图类似，那么下面的结构可以这样配置
  
  加入这段代码

  [
    'postcss-px-to-viewport',
    {
        viewportWidth: 750, // (Number) The width of the viewport.
        viewportHeight: 1334, // (Number) The height of the viewport. -- 一般不需要配置
        unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
        viewportUnit: "vw", // (String) Expected units.
        selectorBlackList: [], // (Array) The selectors to ignore and leave as px.
        minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
        mediaQuery: false // (Boolean) Allow px to be converted in media queries.
    }
  ],

结果如图

适配到此结束，下面就是一些关于适配的引申话题了，有兴趣的可以看看，没兴趣的就打道回府吧。后面想着使用vite进行适配移动端的效果。目前正在进行中，主要是通过vite搭建react项目，然后对项目进行rem适配，最后引入antd-mobile组件，在vite.config.js中进行antd-mobile按需加载。以后如果好了，会将链接放在此处，目前先占个位置

4，引申，移动端适配方案

• 4.1 flexible方案
  • flexible方案是阿里早期的一个开源移动端适配解决方案，引用flexible后，在页面上我们统一使用rem来布局，rem 相对于html节点的font-size进行的计算,其核心代码如下：

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

  通过设置document.documentElement.style.fontSize就可以统一整个页面的布局标准
• 4.2 vh、vw方案
  • vh、vw方案即将视觉视口宽度 window.innerWidth 和视觉视口高度window.innerHeight等分为 100 份
  • 如果视觉视口为750px，那么1vw = 7.5px，这时UI给定一个元素的宽为75px（设备独立像素），我们只需要将它设置为75 / 7.5 = 10vw

番外

通过写作，不断的提升自己。提升自己才是王道，给自己留下笔记，日后好相见。