モバイル端末の適応により、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 最適化 Zabbix パーティション最適化

zabbix を利用する上での最大のボトルネックはデータベースです。zabbix のデータストレージ...

MySQLは効率的なインデックス例分析を確立する

この記事では、例を使用して、MySQL で効率的なインデックスを作成する方法について説明します。ご参...

MySQL IDは1から増加し始め、不連続IDの問題を素早く解決します

mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...

MySQLの日付と時刻の間隔計算の分析例

この記事では、例を使用して、MySQL の日付と時刻の間隔計算について説明します。ご参考までに、詳細...

選択にスタイルを追加するための純粋な CSS (スクリプトなし) 実装

通常は ul、li を介して選択のデフォルト スタイルを変更して、実現をシミュレートします。このよう...

Vue のデータ応答性に関する詳細な理解

目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...

Vueはシンプルなショッピングカートの例を実装します

この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...

シンプルなショッピングカート機能を実現するjs

この記事の例では、簡単なショッピングカート機能を実現するためのjsの具体的なコードを参考までに共有し...

HTML+CSS でハートビートの特殊効果を作成する

今日は、シンプルなハートビート効果を作成します。多くのコードは必要ありません。ボックスを追加し、CS...

jQueryアニメーションを理解するのに役立つ記事

目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...

スクロールバーを非表示にする HTML の簡単な実装

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

Hyper-V の紹介とインストールと使用 (詳細な図解)

はじめに:IT 業界の巨人である Microsoft 独自の仮想化技術は、VMware や Citr...

MYSQL スロークエリとログの例の説明

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

Vue.jsはカレンダー機能を実装します

この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...

dockerでpdflatex環境を設定する方法

技術的背景Latex は文書作成、特に記事作成には欠かせないツールであり、必須のテキスト組版ツールで...