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

推薦する

HTML で #include ファイルを使用する例

a.htmとb.htmの2つのファイルがあります。同じディレクトリ内のa.htmの内容は次のとおりで...

Vue カプセル化に基づくプルダウン更新およびプルアップ読み込みコンポーネント

VueとネイティブJavaScriptカプセル化に基づいて、プルダウンリフレッシュとプルアップロード...

Mysqlチュートリアルでのグループランキングの実装例の詳細な説明

目次1. データソース2. データの総合順位1) 総合ランキング2) 同順位3) 同順位3. データ...

CSS3アニメーションを使用して、小さい円から大きい円に拡大し、外側に広がる効果を実現する例

序文この記事では、CSS3アニメーションを使用して、円が小さいものから大きく拡大し、外側に広がる効果...

vueの実践的な応用におけるvuexの永続性の詳細な説明

目次vuex 永続性要約するvuex 永続性vuex: ブラウザを更新すると、vuexの状態は初期状...

SSHパスワードフリーログイン設定方法の詳しい説明(画像とコマンド)

まず、私たちがやりたいことは、serverA の usera を使用して、パスワードなしで serv...

Linux の一般的なハードディスク管理コマンドの紹介

目次1. dfコマンド2. duコマンド3. fsckファイルシステム修復コマンド4. ディスクステ...

MySQLサーバーは--read-onlyオプションで実行されているため、このステートメントを実行できません

会議中に同僚から開発ライブラリを書き込めないとの報告を受けました。エラー メッセージは次のとおりでし...

Bash スクリプトでの配列メソッドの作成と使用の概要

Bashで配列を定義するbash スクリプトで新しい配列を作成する方法は 2 つあります。 1 つ目...

Vueコンポーネントの動的コンポーネントの詳細な説明

目次要約する要約する配列が変更されると、対応するデータを動的にロードしますシナリオ: 異なるコンポー...

Dockerデータを完全にクリーンアップする方法

目次定期的に剪定するミラーエビクションコンテナのクリーンアップネットワークソート体積の蒸発完全にクリ...

MySQL 8.0.15 圧縮版インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...

Vue カプセル化コンポーネント ツール $attrs、$listeners の使用

目次序文$属性例: $listeners (公式説明)使用シナリオ要約する序文複数レベルのコンポーネ...

JavaScriptオブジェクト指向について学ぼう

目次JavaScript プロトタイプチェーンオブジェクトプロトタイプトップレベルのプロトタイプOb...

シンプルなスネークを実現するためのネイティブjsキャンバス

この記事では、参考までに、簡単なスネークゲームを実装するためのjsキャンバスの具体的なコードを共有し...