Le projet d'échafaudage React implémente rapidement l'adaptation du terminal mobile de la fenêtre

avant-propos

Pour des raisons de travail, j'ai écrit le système de gestion d'arrière-plan, et je ne sais pas grand-chose sur certaines adaptations de la page h5. Il se trouve que j'étais libre pendant cette période, alors j'ai pris le temps de me renseigner sur le dernier plan d'adaptation de h5. Parce que je l'ai utilisé postcss-to-px2rempour l'adaptation avant, mais je ne l'ai pas fait depuis longtemps, donc j'apprends aussi d'autres choses maintenant.

1. Créez un projet de réaction grâce à un échafaudage de réaction

npx créer-réagir-app +项目名

Parce que ma version de nœud est 18.2.0, la version de réaction devient 18.2.0 après le téléchargement
Version en cours d'exécution du projet réagir 18.2.0

2, courir

npm run start

3. Adaptez-vous à la fenêtre d'affichage de la solution mobile

1, installez le 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. Avant de vous préparer à exposer webpack.config.js, vous devez enregistrer le code, sinon le projet signalera une erreur.

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

3. Préparez-vous à exposer webpack.config.js via la ligne de commande. Cette étape est irréversible. Si vous pensez qu'il y a un problème avec votre exposition webpack ou si vous souhaitez revenir au code précédent, vous pouvez utiliser la commande git pour revenir en arrière. L'opération spécifique est la suivante.

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

4 Commande Exposez :npm run eject
- Cela peut être dû aux différentes versions de react. Lorsque cette étape est terminée, npm run ejectun rapport d'erreur s'affiche et un message d'erreur apparaît :
```
Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` env
```
- Ma solution consiste à ajouter ce code de parserOptions à eslintConfig

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

Lien de référence : problèmes de github

5. Configurez la fenêtre
Trouvez le webpack.config.js exposé dans le dossier de configuration, puis configurez les données à l'intérieur. Si cela ressemble à la figure ci-dessous, la structure suivante peut être configurée comme ceci Ajoutez ce

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

Le résultat est montré sur la figure
webpack

L'adaptation est ici, et voici quelques sujets détaillés sur l'adaptation. Si vous êtes intéressé, vous pouvez jeter un coup d'œil, et si vous n'êtes pas intéressé, rentrez chez vous. Plus tard, je penserai à l'utiliser vitepour adapter l'effet du terminal mobile. Il est actuellement en cours, principalement pour construire un projet React via vite, puis adapter le projet rem, et enfin introduire antd-mobiledes composants 在vite.config.jsà antd-mobilecharger à la demande. Si c'est bon à l'avenir, je mettrai le lien ici, et maintenant j'occuperai une place

4. Extension, solution d'adaptation de terminal mobile

4.1 solutions flexibles
- flexibleLa solution est une première solution d'adaptation de terminal mobile open source d'Ali. Après référence , nous l'utilisons uniformément pour la mise en page flexiblesur la page . Par rapport au calcul des nœuds , son code de base est le suivant :remremhtmlfont-size
```
// set 1rem = viewWidth / 10 
function setRemUnit () {
      
       
   var rem = docEl.clientWidth / 10  
   docEl.style.fontSize = rem + 'px' 
} 
setRemUnit();
```
document.documentElement.style.fontSizeLa norme de mise en page de la page entière peut être unifiée en définissant
4.2 vh, schéma vw
- vh、vwLa solution consiste à diviser la largeur de la fenêtre visuelle window.innerWidth et la hauteur de la fenêtre visuelle window.innerHeighten 100 parties
- Si la fenêtre d'affichage visuelle est 750px, 1vw = 7.5pxalors, UIcompte tenu de la largeur d'un élément 75px(pixels indépendants de l'appareil), nous n'avons qu'à la définir sur75 / 7.5 = 10vw

supplémentaire

Améliorez-vous constamment par l'écriture. S'améliorer est la voie royale, laissez des notes pour vous-même, afin que nous puissions nous rencontrer à l'avenir.