webpackのモバイル適応ソリューションの概要

レム

W3C では、rem をルート要素のフォントサイズとして定義しています。これは、ブラウザーのルート要素 (HTML 要素) のフォントサイズを基準としてのみ決定される単位です。つまり、幅の異なるモデルの場合、対応するルート要素のフォントサイズを計算し、同じ CSS コードを使用して比例調整を行うだけで済みます。最も単純なケースを考えてみましょう。

HTML コードスニペット

// モバイルページに必要なメタ。デバイス画面の幅をドキュメントの幅に設定します <meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

js コードスニペット

// ドキュメントの幅に基づいてルート要素のフォントサイズを計算します。例としてドキュメントの幅の 1/10 を取ります。画面の幅が 375 の場合、ルート要素のフォントサイズは 37.5px になります。
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w / 10 + 'px';

CSS コードスニペット

//このとき、.div{
  幅: 2rem;
}
//この div の幅は 75 ピクセルになります。同様に、画面の幅が 360 の場合、div の幅は 72 ピクセルになります。
//日常の開発では、最も一般的なデザイン案は750pxです。デザイン案の領域の高さが30pxの場合、
//比例スケーリングを実現するために、CSSでheight: 0.4rem (30/75)と記述します

実際の開発では、webpack をビルドするときに rem 適応を実現するために、postcss-pxtorem と lib-flexible などのプラグインを使用するのが一般的です。

インストール: npm i postcss-pxtorem --Dおよびnpm i amfe-flexible --S

webpack.config.js で postcss-loader を設定する

モジュール.エクスポート = {
    エントリ: "./src/index.js",
    出力: {
        パス: path.join(__dirname,"/dist"),
        ファイル名: "bundle.js"
    },
    モジュール:{
        ルール:[
            {
                テスト: /\.css$/,
                使用方法: ['style-loader','css-loader','postcss-loader'] // postcss-loader を設定する
            }
        ]
    },  
}

プロジェクトのルートディレクトリに新しい.postcssrc.jsファイルを作成し、そこにpostcss-pxtoremプラグインの設定を記述します。

モジュール.エクスポート = {
  「プラグイン」: {
    "postcss-pxtorem": {
        rootValue: 75, //750 のデザイン ドラフト propList: ['*']
     }
   }
}

エントリで指定されたエントリ js ファイル ("./src/index.js") に lib-flexible を導入します。

'amfe-flexible' をインポートする

このように、CSSでデザイン原稿内の絶対ピクセル値を直接記述することができます。例えば、750のデザイン原稿内のdiv#testの幅が200pxであれば、変換せずにそのまま記述することができます。

＃テスト{
  幅: 200ピクセル
}

フォルクスワーゲン

もう 1 つの解決策は、ブラウザの表示領域の幅を基準とした単位である、ビューポートの幅の 1% である vw を使用することです。

// モバイルページに必要なメタ。デバイス画面の幅をドキュメントの幅に設定します <meta name="viewport" content="width=device-width, initial-scale=1，user-scalable=0">

モバイルデバイスでは、width = device-width が設定されている場合、画面の幅は 100vw になります。

vw レイアウトを使用する場合、rem のように js 内のルート要素のフォントサイズを動的に設定する必要はありませんが、画面の幅に直接相対的になります。例えば、750のデザイン案ではdivの幅は200pxなので、次のように記述できます: width: 200 / 750 * 100 vw

webpack では、postcss-px-to-viewport プラグインを使用してこれを実現できます。

インストール: npm i postcss-px-to-viewport --D

上記の rem のように、webpack.config.js で postcss-loader を設定します。
プロジェクトのルートディレクトリに新しい.postcssrc.jsファイルを作成し、その中にpostcss-px-to-viewportプラグインの設定を記述します。

モジュール.エクスポート = {
  「プラグイン」: {
    'postcss-px-to-viewport': {
        viewportWidth: 750 //750 デザイン案}
   }
}

この方法では、デザインドラフト内の絶対ピクセル値を CSS に直接書き込むことができます。例は上記の rem の例と同じです。

サードパーティのUIフレームワークに適応する

モバイルデバイスで他のコンポーネントライブラリを使用したり、vant や mint-ui などのサードパーティの UI フレームワークを参照したりすることがあります。サードパーティのフレームワークは 375 ピクセルのデザインドラフトに基づいて px 単位を使用するため、プロジェクトのデザインドラフトが 750 ピクセルの場合、適応に同じ viewportWidth を使用することはできません。

このとき、.postcssrc.js で次のように設定できます (vw を例にとると、rem も同様です)。

定数パス = require('path')
module.exports = ({file}) => {

  //vant UI フレームワークを使用する場合 const width = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750; 
  
  戻る {
    「プラグイン」: {
      「postcss-px-to-viewport」: {
        viewportWidth: 幅、
      }
    }
  }
}

結論

rem と vw はどちらも一般的に使用されているモバイル適応ソリューションです。両者の違いは、まず第一に互換性にあります。Rem は古いバージョンのブラウザと互換性があります。caniuse の Web サイト caniuse.com/ を参照してください。次に、rem は js を通じてルート要素のフォントサイズを計算する必要がありますが、vm は純粋な CSS 実装です。

以上で、webpack のモバイル適応ソリューションの概要についての説明は終了です。より関連性の高い webpack のモバイル適応コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: