モバイル端末の適応により、px は自動的に rem に変換されます。

モバイル端末の適応により、px は自動的に rem に変換されます。
  • まずpostcss-pxtoremをインストールします: npm install postcss-pxtorem --save-dev でインストールします
  • 画面の変更に基づいてルート要素のフォント サイズを動的に設定します。

vueのhtmlで書きました

関数setRem(){
        let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth; //html と body の画面幅を検出します。 document.documentElement.style.fontSize= htmlWidth/7.5 + 'px'; //750 画面でフォント サイズを 100px に設定します。これにより、変換された rem で、以前のピクセル数が一目でわかります。開発用の画面サイズを選択できます。画面幅 320 の 3.2 も許容されます。
      }
      再割り当て();
      window.onresize = function () { //ブラウザのサイズが変更されるとwindow.onresize関数がトリガーされ、次にsetRem()関数がトリガーされます。
        リセット()
      }

- 次に、.postcssrc.js で postcss-pxtorem を設定します (.postcssrc.js は、スキャフォールディングによって自動的に生成されるファイルです。設定後、npm run dev を再度実行します)。

赤い円で囲まれた部分は設定する必要があり、残りは組み込まれています。

'postcss-pxtorem': {
  rootValue: 100, //ルート要素のサイズ設定、つまりHTMLのフォントサイズ unitPrecision: 5, //remで小数点以下何桁残すか propList: ['*'], //変換するプロパティのリストです。ここではすべて['*']に設定しています。境界線のみ設定する必要がある場合は、['*', '!border*']と記述できます  
  selectorBlackList: ['.radius'], // CSSセレクターをフィルタリングするための配列です。例えば['fs']に設定すると、例えばfs-xlクラス名、pxスタイルは変換されません。ここでは正規表現の記述もサポートされています。
  replace: true, //これが何に使用されるのか本当にわかりません。知っている人は教えてください mediaQuery: false, //メディアクエリでは無効です(@media screenなど) minPixelValue: 12 //12未満のピクセルは変換されません}

設定後、npm run devを再度実行できます。

幅と高さ200ピクセル

200px は 2rem になり、設定された 100px がフォント サイズになります。ルート値は100です

クラス名を半径に設定するスタイルは変換されません

要約する

上記は、px を rem に自動的に変換するためにエディターが紹介したモバイル適応です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  タグ li はブロックレベル要素ですか?

>>:  方言変換のためのApache Calciteコード

推薦する

Mysql データベースの日付と日時型でデフォルト値 0000-00-00 を設定するときに発生するエラー問題の詳細な説明

現象: MySQL バージョン 5.7 以降では、日付型と日付時刻型のデフォルト値が「0000-00...

MySQL 数値型オーバーフローの処理方法

さて、質問させてください。MySQL で列を int(0) に設定すると何が起こりますか?この問題を...

Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法

1. セットアップを始める次のコード関数を簡単に紹介します。 ref 関数を使用して変数の変更を監視...

deepin 2014 システムに MySQL データベースをインストールする方法

Deepin 2014 のダウンロードとインストールDeepin 2014 のダウンロードとインスト...

Vue3 (III) ウェブサイトホームページレイアウト開発

目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...

DockerにRedisをインストールし、設定ファイルとして起動する詳細な説明

更新: 最近、サーバーがマイニング ウイルスによってハッキングされたことが判明しました。これは、おそ...

Vue3でelement-plusを使用する方法の詳細な説明

目次1. インストール2. main.jsにインポートする3. 使用Vue3がリリースされてからしば...

Linux のさまざまなロックメカニズムの使用方法と違いについて詳しく説明します

序文:この知識を理解する必要がある人は、すでにプロセス間通信とスレッド間通信の基本的な理解を持ってい...

MySQL 5.7 および 8.0 データベースのルート パスワードを忘れた場合の解決策

注: MySQL5.7 で root パスワードをクラックするには、パスワード認証をスキップしてデー...

js における浅いコピーと深いコピーの詳細な説明

目次1. jsメモリ2. 譲渡3. 浅いコピー4. ディープコピー序文:以下の記事を読む前に、記憶に...

MySQL のキーとインデックスの違い

まずはコードを見てみましょう: ALTER TABLE reportblockdetail ADD ...

MySQLのREDOログ(リドゥログ)とロールバックログ(アンドゥログ)の詳しい説明

序文:前回の記事では、MySQL システムでよく使用されるログをいくつか説明しました。実は、トランザ...

vuex データの永続化のための 2 つの実装ソリューション

目次ビジネス要件:解決策 1: vuex-persistedstate解決策2: vuex-pers...

Vueプラグインの実装で発生した問題の概要

目次シーン紹介プラグインの実装問題1: 重複したヘッダーコンポーネント質問2: 別の実装アイデア質問...

Navicat で MySQL データベースのパスワードを変更する複数の方法

方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...