The react scaffolding project quickly implements viewport mobile terminal adaptation

foreword

Because of work reasons, I have been writing the background management system, and I don't know much about some adaptations of the h5 page. I happened to be free during this time, so I took the time to learn about the latest adaptation plan of h5. Because I used it postcss-to-px2remfor adaptation before, but I haven't done it for a long time, so I'm also learning other things now.

1. Create a react project through react scaffolding

npx create-react-app +项目名

Because my node version is 18.2.0, the react version becomes 18.2.0 after downloading
Project running version react 18.2.0

2, run

npm run start

3. Adapt to the mobile solution viewport

1, Install the plugin

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

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

2. Before preparing to expose webpack.config.js, you need to save the code, otherwise the project will report an error.

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

3. Prepare to expose webpack.config.js through the command line. This step is irreversible. If you feel that there is a problem with your webpack exposure or want to return to the previous code, you can use the git command to roll back. The specific operation is as follows.

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

4 Expose command:npm run eject
- It may be because of the different versions of react. When this step is completed, npm run ejectthere is an error report, and an error message appears:
```
Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` env
```
- My solution is to add this code of parserOptions to eslintConfig

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

Reference link: github issues

5. Configure the viewport
Find the exposed webpack.config.js in the config folder, and then configure the data inside. If it is similar to the figure below, then the following structure can be configured like this Add this

code

  [
    '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.
    }
  ],

The result is shown in the figure
webpack

The adaptation is over here, and the following are some extended topics about adaptation. If you are interested, you can take a look, and if you are not interested, go home. Later, I will think about using it viteto adapt the effect of the mobile terminal. It is currently in progress, mainly to build a react project through vite, then adapt the project rem, and finally introduce antd-mobilecomponents 在vite.config.jsto antd-mobileload on demand. If it is good in the future, I will put the link here, and now I will occupy a place

4. Extension, mobile terminal adaptation solution

4.1 flexible solution
- flexibleThe solution is an early open source mobile adaptation solution of Alibaba. After reference , we use it uniformly for layout flexibleon the page . Compared with the calculation of nodes , its core code is as follows:remremhtmlfont-size
```
// set 1rem = viewWidth / 10 
function setRemUnit () {
      
       
   var rem = docEl.clientWidth / 10  
   docEl.style.fontSize = rem + 'px' 
} 
setRemUnit();
```
document.documentElement.style.fontSizeThe layout standard of the entire page can be unified by setting
4.2 vh, vw scheme
- vh、vwThe solution is to divide the width of the visual viewport window.innerWidth and the height of the visual viewport window.innerHeightinto 100 parts
- If the visual viewport is 750px, 1vw = 7.5pxthen, UIgiven an element's width 75px(device-independent pixels), we only need to set it to75 / 7.5 = 10vw

extra

Constantly improve yourself through writing. Improving yourself is the kingly way, leave notes for yourself, so that we can meet each other in the future.