vue プロジェクトで rem を使用して px を置き換える例

基本的なポイント: rem はルートノードのフォントサイズを基準とします。したがって、px は必要ありません。
ルートフォント: フォントサイズ (px)
px: cm (センチメートル) と考えてください。
ベンチマーク: 750 のデザインドラフト (通常、UI デザイナーは 750 のデザインドラフトを提供します)。

道具

vue-cli: スキャフォールディングを使用して vue フロントエンドプロジェクトを構築する
postcss: postcss は、js プラグインを使用して CSS スタイルを変換するのに役立つツールです。たとえば、ここではファイル内の 16px を 1rem に置き換えます (ルートサイズのデフォルトは 16px)。この方法では、自分で計算する必要がありません。
cssrem: 主にpx（UIデザインドラフトのpx）を対応するremに変換するのに役立ちます
次に、ルートディレクトリのフォントサイズを動的に計算するために、jsコードも使用する必要があります。とにかく、これは画面の幅を動的に取得するためのjsコードの一部です。

プラグインをインストールする

npm および postcss、postcss-pxtorem、postcss-loader、postcss-import、postcss-url

次にそれをindex.htmlに追加します

<meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1">

プロジェクトのルートディレクトリに.postcssrc.jsファイルを追加します。

モジュール.エクスポート = {
    「プラグイン」: {
      "postcss-import": {}, // @import で CSS ファイルをインポートするために使用されます。"postcss-url": {}, // CSS ファイルまたは node_modules ファイルを導入するためのパス。"postcss-aspect-ratio-mini": {}, // 要素コンテナーのアスペクト比を処理するために使用されます。"postcss-write-svg": { utf8: false }, // モバイル端末用の 1px ソリューションを処理するために使用されます。このプラグインは、主に border-image と background を使用して 1px 関連の処理を行うものです。
      "postcss-cssnext": {}, // このプラグインにより、CSS の将来の機能が使用できるようになり、これらの機能に関連する互換性処理が実行されます。
      "postcss-px-to-viewport": { //px 単位を vw、vh、vmin、vmax などのビューポート単位に変換します。これは、vw 適応ソリューションのコア プラグインの 1 つでもあります。
          viewportWidth: 750, //ビューポートの幅viewportHeight: 1334, //ビューポートの高さunitPrecision: 3, //pxをビューポート単位値に変換する小数点以下の桁数viewportUnit: 'vw', //変換するビューポート単位値を指定しますselectorBlackList: ['.ignore', '.hairlines'], //ビューポート単位値を変換しないクラスを指定します。これはカスタマイズして無制限に追加できますminPixelValue: 1, //1px以下はビューポート単位に変換されませんmediaQuery: false //メディアクエリでpxを許可
      },
      "postcss-viewport-units":{}, //vw、vh、vmin、vmax を適応します。これは、vw レイアウトを実装するために不可欠なプラグインです。 "cssnano": { //主に CSS コードを圧縮およびクリーンアップするために使用されます。 Webpack では、cssnano は css-loader にバンドルされているため、自分でロードする必要はありません。
          preset: "advanced", //繰り返し autoprefixer: false, //cssnext と cssnano の両方に autoprefixer があります。実際は 1 つだけ必要なので、デフォルトの autoprefixer を削除し、cssnano の autoprefixer を false に設定します。
          "postcss-zindex": false //このプラグインが有効になっている限り、z-index値は1にリセットされます
       } 
    }
  }

異なる画面サイズに切り替えるときは、ルートフォントサイズを動的に変更する必要があります。簡単なjsをheadに挿入します。publicディレクトリに新しいshipei.jsを作成し、このjsをindex.htmlのheadに導入します。

//shipei.js
（関数（） {
   関数 autoRootFontSize() {
       document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
         // screen.width と document.documentElement.getBoundingClientRect().width の最小値を取得し、750 で割り、32 を掛けます。おわかりのように、元のサイズ 750 の 32px になります。画面サイズが 375px になると、フォント サイズは 16px になります。つまり、ルート fontSize のサイズは画面サイズに正比例して変化します。簡単じゃないですか？
   window.addEventListener('resize', autoRootFontSize);
   自動ルートフォントサイズ();
})();

インデックス.html

<!DOCTYPE html>
<html lang="">
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1">
    <link rel="スタイルシート" href="/public.css" rel="外部nofollow" type="text/css">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="外部 nofollow" >
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="/shipei.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <本文>
    
    <div id="アプリ"></div>
    <!-- ビルドされたファイルは自動的に挿入されます -->
  </本文>
</html>

パブリックに配置するものの開始ディレクトリを記述する必要がないことに注意してください。スキャフォールディングがパッケージ化されると、パブリックフォルダー内で検索されます。

について

getBoundingClientRect().width は、実際には親の右側とブラウザの原点 (0,0) と親の左側の間の距離、つまり親の幅 + 2padding + 2border を取得します。
このとき、clientWidth は、境界線の幅を除いて、親の幅 + 2*padding に等しくなります。
子コンテンツが非表示になっていない場合、つまりオーバーフローが自動の場合、親はボックスモデルを適応させないため、子コンテンツの幅はこの数値のままになります。後者の幅は、上で取得した幅からスクロールバーの幅 (17px) を引いた値になります。

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <タイトル></タイトル>
        <スタイル タイプ="text/css">
            *{
                マージン: 0;
                パディング: 0;
            }
        </スタイル>
    </head>
    <本文>
        <div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;">
                <div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
                    高さ: 400px; 幅: 600px; 境界線: 実線 3px #f00;">
                </div>
            </div>
    </本文>
</html>
<script type="text/javascript">
    /* 
     getBoundingClientRect().width は、実際には親の右側とブラウザの原点 (0,0) と親の左側の間の距離、つまり親の幅 + 2padding + 2border を取得します。
     このとき、clientWidth は、境界線の幅を除いて、親の幅 + 2*padding に等しくなります。
     子コンテンツが非表示になっていない場合、つまりオーバーフローが自動の場合、親はボックス モデルを適応させないため、子コンテンツの幅はこの数値のままになります。後者の幅は、上で取得した幅からスクロール バーの幅 (17 px) を引いた値です。例は次のとおりです。
     */
     var divP = document.getElementById('divParent');
            var divD = document.getElementById('divDisplay');
    
            var クライアント幅 = divP. クライアント幅;
            var getWidth = divP.getBoundingClientRect().width;
            divD.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';
            divD.innerHTML += 'getWidth: ' + getWidth + '<br/>';
</スクリプト>

結果は clientWidth が 516 となり、これはコンテンツ幅 + 2padding として計算されます。
getWidth（つまりgetBoundingClientRect().width）にはコンテンツの幅+2padding+2borderが含まれる
ステップ 5: デザインドラフトの px を rem 単位に変換します。cssrem プラグインをインストールします (プラグインマーケットで)。
次に、「ファイル」->「環境設定」->「設定」に移動し、cssrem を検索して、ルートフォントサイズを 16 に設定します。

これで、vue プロジェクトで rem を使用して px を置き換える実装例に関するこの記事は終了です。vue rem を使用して px コンテンツを置き換える関連の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

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