コマンドを実行してプラグインpostcss-pxtoremをインストールします npm インストール postcss-pxtorem -D postcss.config.jsと同じディレクトリに新しいpackage.jsonを作成します。ファイルの内容は次のとおりです。 モジュール.エクスポート = { プラグイン: { '自動プレフィックス': { ブラウザ: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 32, //結果は、デザイン要素のサイズ/32です(通常、750pxデザインのルート要素のサイズは32に設定されます)。たとえば、要素の幅が320pxの場合、最終ページは10remに変換されます。 propList: ['*'], //プロパティセレクタ、*は一般的なセレクタを示しますBlackList:[]はセレクタを無視します。ig-は、.ig-で始まるすべてのセレクタが変換されないことを示します} } } postcss.config.jsの設定が完了したら、プロジェクトを再起動して有効にする必要があります。 ルート ディレクトリ src の util ディレクトリに新しい rem.js ファイルを作成します。 // rem比例適応設定ファイル // 基本サイズ const baseSize = 750 // この値はpostcss.config.jsファイルのrootValueと一致している必要があることに注意してください // rem関数を設定する function setRem () { // 現在のページ幅は 375 幅の拡大縮小率を基準としており、必要に応じて変更できます。一般的に、設計図は 750 幅です (設計図を入手して、都合に合わせて変更できます)。 定数スケール = document.documentElement.clientWidth / 375 // ページのルート ノードのフォント サイズを設定します ("Math.min(scale, 2)" は最大拡大率が 2 であることを意味します。実際のビジネス ニーズに応じて調整できます) document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } // setRem() を初期化する // ウィンドウサイズを変更するときに rem をリセットする window.onresize = 関数 () { リセット() } rem.jsファイルをmain.jsにインポートし、プロジェクトを開始します。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: 有名なウェブサイトのロゴに使われている25種類のフォントのコレクション
>>: React Hooksコンポーネント間で値を渡す方法の詳細な説明(tsを使用)
目次序文導入ライブ使いやすいルートスコープマウント要素の指定ライフサイクルコンポーネントグローバル状...
目次1. MySQLのバックアップタイプの詳細な説明1. バックアップがデータベースに与える影響に基...
show processlist コマンドは非常に便利です。MySQL の実行が 50% 以上になる...
これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...
Linux インストール JDK1.8 手順1. CentOS に独自の openJDK があるかど...
HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...
目次1. キャラクター機能1. ケースコントロール機能2. キャラクターコントロール機能2. 数学関...
序文Sass は CSS3 言語の拡張機能です。Sass を使用すると、より良いスタイルシートをより...
目次1. 関数を宣言する2. 関数の呼び出し3. 関数パラメータ4. 関数の戻り値5. 議論の使用6...
コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...
1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...
1. my.iniファイルにskip-grant-tablesを追加し、MySQLサーバーを再起動し...
この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...
このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...
具体的な方法: 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...