El proyecto de andamios de reacción implementa rápidamente la adaptación del terminal móvil de ventana gráfica

prefacio

Por motivos de trabajo, he estado escribiendo el sistema de gestión de fondo, y no sé mucho sobre algunas adaptaciones de la página h5. Estaba libre durante este tiempo, así que me tomé el tiempo para aprender sobre el último plan de adaptación de h5. Porque lo usé postcss-to-px2rempara la adaptación antes, pero hace mucho tiempo que no lo hago, así que ahora también estoy aprendiendo otras cosas.

1. Cree un proyecto de reacción a través del andamiaje de reacción

npx crear-reaccionar-aplicación +项目名

Debido a que la versión de mi nodo es 18.2.0, la versión de reacción se convierte en 18.2.0 después de la descarga
Versión en ejecución del proyecto reaccionar 18.2.0

2, corre

npm run start

3. Adáptese a la ventana gráfica de la solución móvil

1, instala el complemento

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

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

2. Antes de prepararse para exponer webpack.config.js, debe guardar el código; de lo contrario, el proyecto informará un error.

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

3. Prepárese para exponer webpack.config.js a través de la línea de comando. Este paso es irreversible. Si cree que hay un problema con la exposición de su paquete web o desea volver al código anterior, puede usar el comando git para retroceder. El funcionamiento específico es el siguiente.

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

4 Exponer comando:npm run eject
- Puede deberse a las diferentes versiones de reaccionar, cuando se completa este paso, npm run ejecthay un informe de error y aparece un mensaje de error:
```
Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` env
```
- Mi solución es agregar este código de parserOptions a eslintConfig

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

Enlace de referencia: problemas de github

5. Configure la ventana gráfica
Busque el webpack.config.js expuesto en la carpeta de configuración y luego configure los datos dentro.Si es similar a la figura a continuación, entonces la siguiente estructura se puede configurar así Agregue este

código

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

El resultado se muestra en la figura.
paquete web

La adaptación ha terminado aquí, y los siguientes son algunos temas extendidos sobre la adaptación, si te interesa, puedes echar un vistazo, y si no te interesa, vete a casa. Más adelante pensaré en usarlo vitepara adaptar el efecto del terminal móvil. Actualmente está en progreso, principalmente para construir un proyecto de reacción a través de vite, luego adaptar el proyecto remy finalmente introducir antd-mobilecomponentes 在vite.config.jspara antd-mobilecargar a pedido. Si es bueno en el futuro, pondré el enlace aquí, y ahora ocuparé un lugar.

4. Extensión, solución de adaptación de terminal móvil

4.1 solución flexible
- flexibleLa solución es una de las primeras soluciones de adaptación de terminal móvil de código abierto de Ali. Después de la referencia , la usamos uniformemente para el diseño flexibleen la página . En comparación con el cálculo de los nodos , su código central es el siguiente:remremhtmlfont-size
```
// set 1rem = viewWidth / 10 
function setRemUnit () {
      
       
   var rem = docEl.clientWidth / 10  
   docEl.style.fontSize = rem + 'px' 
} 
setRemUnit();
```
document.documentElement.style.fontSizeEl estándar de diseño de toda la página se puede unificar configurando
4.2 vh, esquema vw
- vh、vwLa solución es dividir el ancho de la ventana gráfica visual window.innerWidth y la altura de la ventana gráfica visual window.innerHeighten 100 partes
- Si la ventana gráfica es 750px, 1vw = 7.5pxentonces, UIdado el ancho de un elemento 75px(píxeles independientes del dispositivo), solo necesitamos establecerlo en75 / 7.5 = 10vw

extra

Mejora constantemente a ti mismo a través de la escritura. Mejorarte a ti mismo es el camino real, deja notas para ti mismo, para que podamos conocernos en el futuro.