reactモバイルエンドアダプタの実践

reactモバイルエンドアダプタスキーム
本プロジェクトはcreate-react-appに基づいて構築される.モバイル端末の詳細

w 3 cplusモバイル端末ページの適合

w 3 cplus Vueプロジェクトでvwを使用してモバイルエンドアダプタ

を実現する方法

w 3 cplus Flexibleを使用してH 5ページの端末適合

を実現

本プロジェクト構成ソースアドレス

tips

/*    vm           */
img {
  content: normal !important; 
}

1️⃣ プロジェクト初期+露出構成項目

1、create-react-app react-vw-layout初期化プロジェクト

2、npm run eject暴露構成項

2️⃣ postCssプラグインのインストール構成
package.jsonに依存を追加し、インストール

"postcss-aspect-ratio-mini": "0.0.2",
//--        postcss-preset-env       "postcss-preset-env": "6.0.6"?
"postcss-cssnext": "^3.1.0",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"postcss-px-to-viewport": "0.0.3",
"postcss-viewport-units": "^0.1.4",
"postcss-write-svg": "^3.0.1"

config/webpack.config.dev.jsファイルでの追加構成の変更(開発環境有効)(本番環境パッケージ構成は以下の通り、フォルダconfig/webpack.config.prodでも変更)

// config/webpack.config.dev.js
//         
const fs = require('fs');
const path = require('path');
const resolve = require('resolve');
const webpack = require('webpack');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const ManifestPlugin = require('webpack-manifest-plugin');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');

//         -   
const postcssAspectRatioMini = require('postcss-aspect-ratio-mini');
const postcssPxToViewport = require('postcss-px-to-viewport');
const postcssWriteSvg = require('postcss-write-svg');
const postcssCssnext = require('postcss-preset-env'); //         postcss-preset-env       "postcss-preset-env": "6.0.6",
const postcssViewportUnits = require('postcss-viewport-units');
const cssnano = require('cssnano');


//        

 {
    // Options for PostCSS as we reference these options twice
    // Adds vendor prefixing based on your specified browser support in
    // package.json
    loader: require.resolve('postcss-loader'),
    options: {
      // Necessary for external CSS imports to work
      // https://github.com/facebook/create-react-app/issues/2677
      ident: 'postcss',
      plugins: () => [
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
          autoprefixer: {
            flexbox: 'no-2009',
          },
          stage: 3,
        }),

        // -----          -----?
        postcssAspectRatioMini({}),
        postcssPxToViewport({
          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: ['.ignore', '.hairlines'], // (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.
        }),
        postcssWriteSvg({
          utf8: false
        }),
        postcssCssnext({}),
        postcssViewportUnits({}),
        cssnano({
          //   --  
          // preset: "advanced",
          // autoprefixer: false,
          // "postcss-zindex": false
          //           ,      
          "cssnano-preset-advanced": {
            zindex: false,
            autoprefixer: false
          },
        })
      ],
    },
},

3️⃣テスト検証
Appを変更します.cssファイル

.App {
  width: 750px;
  height: 300px;
  background: #409eff;
  color: #ffffff;
  line-height: 200px;
  text-align: center;
}

npm startはプロジェクトを起動し、コンソールを開き、この時点で有効になりました.
本番環境を構成して検証し、npm run build、この時点で本番パッケージが有効になりました.
4️⃣ いくつかの互換性hacks処理
public/indexを変更します.html,アリのcdnを導入する

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js">script>
<script>
  window.onload = function() {
    window.viewportUnitsBuggyfill.init({
      hacks: window.viewportUnitsBuggyfillHacks
    });

    //     
    const winDPI = window.devicePixelRatio;
    const uAgent = window.navigator.userAgent;
    const screenHeight = window.screen.height;
    const screenWidth = window.screen.width;
    const winWidth = window.innerWidth;
    const winHeight = window.innerHeight;

    console.log(winDPI, "   DPI");
    console.log(uAgent, "   ");
    console.log(screenWidth, "    ");
    console.log(winHeight, "    ");
    console.log(winWidth, "Windows Width");
    console.log(winHeight, "Windows Height");
  };
script>

これで構成は完了しましたが、プラグインの構成は、公式の構成の使用を理解する必要があります.また、プラグインと実行可能性案は更新されます.ここでは、実際の実行可能性案の実践を学ぶ過程として、より多くの更新案があれば、伝言を残してお知らせします.ありがとう~