React Scaffolding プロジェクトはビューポートのモバイル端末への適応を迅速に実装します

序文

仕事の都合上、私はバックグラウンド管理システムを書いてきましたが、h5 ページのいくつかの適応についてはあまり知りません。たまたまこの時間に時間があったので、h5 の最新の適応計画について学ぶ時間をとりました。以前は適応のために使用していましたpostcss-to-px2remが、長い間やっていなかったので、今は他のことも学んでいます。

1. React Scaffolding を通じて React プロジェクトを作成する

npx 作成-反応-アプリ +项目名

私のノードのバージョンは18.2.0なので、ダウンロード後の反応バージョンは18.2.0になります。
プロジェクト実行バージョン React 18.2.0

2、走る

npm run start

3. モバイルソリューションのビューポートに適応する

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
```
- 私の解決策は、この parserOptions のコードを eslintConfig に追加することです

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

参考リンク：github issues

5. ビューポートを設定する
config フォルダーで公開されている webpack.config.js を見つけて、その中のデータを設定します。それが下図のようであれば、次の構造は次のように設定できます。このコードを追加します

。

  [
    '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 を通じて反応プロジェクトを構築し、次にプロジェクトを適応させrem、最後にオンデマンドでロードするantd-mobileコンポーネント在vite.config.jsを導入することが進行中です。antd-mobile今後よければ、ここにリンクを貼りますので、今場所を占めています

4. 拡張、モバイル端末適応ソリューション

4.1 柔軟なソリューション
- flexibleこのソリューションは、Alibaba の初期のオープンソースモバイルアダプテーションソリューションです。参考にした後、flexibleページ上のremレイアウトに均一に使用します。ノードの計算remと比較すると、そのコアコードは次のとおりです。htmlfont-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.innerHeight100 の部分に分割することです。
- ビジュアルビューポートがの場合、750px要素の幅(デバイスに依存しないピクセル) を考慮して、それを次のように設定するだけで済みます。1vw = 7.5pxUI75px75 / 7.5 = 10vw

番外

書くことで常に自分自身を向上させてください。自分自身を改善することが王道です。将来お互いに会えるように、自分用のメモを残してください。