コマンドを実行してプラグイン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を使用)
<br />おそらく、あなたは会社に入社したばかりで、その会社が「ユーザビリティ」に関す...
序文このプロジェクトでは円形のメニューが必要です。オンラインで検索しましたが、適切なものが見つからな...
この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...
プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が...
目次1 Nginxのインストール2 Nginxの設定3 ホストファイルを変更する4 テストNginx...
この記事では、MySQL マスターとスレーブ データ間の不一致の解決方法と、プロンプト「Slave_...
1.画像をダウンロードするdocker pull selenium/hub docker pull ...
のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...
Web 開発では、チェックボックスは小さく、ユーザーにとって操作があまり便利ではないため、ユーザーが...
目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...
目次序文1. 全員にインストールパッケージを用意する2. Navicatをインストールし、Navic...
1. はじめにPresto は、ギガバイトからペタバイトに及ぶデータ ソースに対してインタラクティブ...
目次1. 背景2. バーチャルリストとは何か3. 関連概念の紹介4. 仮想リストの実装4.1 ドライ...
序文MySQL の構文は誰にとっても難しいものではないと思いますが、この記事では主に MySQL の...
ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...