モバイル端末の適応により、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コード

推薦する

CSSを使用してファイルアップロードパターンを描画する

以下に示すように、あなたならどのようにそれを達成しますか: 通常、フォントアイコンを使用して中央にプ...

MySQL Server 8.0.3 のインストールと設定方法のグラフィックチュートリアル

この文書はMySQL Server 8.0.3のインストールと設定方法を参考のために記録したものです...

Docker+keepalived+nginx を使用してマスタースレーブホットスタンバイを実装する方法の例

序文単一障害点を解決するには、マスター/スレーブ ホット スタンバイ ソリューションを構成する必要が...

メモリの原則に関する詳細な説明: JS では変数はヒープに保存されるのか、スタックに保存されるのか?

目次1. 冷蔵庫に入りきらない象2. シャドウクローン文字列3. 実際に見た「奇妙なボール」 4. ...

Linuxはnode.jsを完全に削除し、yumコマンドで再インストールします。

最初のステップ組み込みのパッケージ管理機能で一度削除する yum 削除 nodejs npm -y ...

Webデザインの経験:ナビゲーションシステムをシンプルにする

<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのは...

JS を使って CSS3 で丸い角を実装する方法

IE で CSS3 を使用して角を丸くする方法を探していたときに、例を見つけました。まだテストして...

JS オブジェクト コンストラクター Object.freeze

目次概要例1) オブジェクトをフリーズする2) 配列をフリーズする3) 浅い凍結4) ディープフリー...

MySQL データベースにおける高同時実行性の問題を解決する方法

序文スタートアップ企業が最初はモノリシック アプリケーションを主要なアーキテクチャとして使用し、通常...

MAC 上の MySQL の初期パスワードを忘れた場合の対処方法

MACでMySQLの初期パスワードを忘れた場合の解決策を参考までに共有します。具体的な内容は次のとお...

MySQL ステートメントロックの実装の分析

概要: 2 つの MySQL SQL ステートメント ロックの分析次のSQL文にどのようなロックが追...

HTML におけるブロックコメントの使用に関する詳細な紹介

HTML の一般的なコメント: <!--XXXXXXXX--> (XXXXXXXX はコ...

ウェブデザインにおける円形要素の使用例 25 選

本日の投稿では、Web デザインで使用される円形要素の優れた例をいくつか挙げ、美しい丸いボタン、メニ...

ボタンをクリックして画像を切り替える JavaScript

この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...

UbuntuにProtobuf 3をインストールするための詳細なチュートリアル

いつインストールするかprotoc コマンドを使用しても Protoc が見つからない場合は、インス...