postcss-pxtorem モバイル適応の実装

postcss-pxtorem モバイル適応の実装

コマンドを実行してプラグイン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を使用)

推薦する

Youdaの新しいプチビューの実装

目次序文導入ライブ使いやすいルートスコープマウント要素の指定ライフサイクルコンポーネントグローバル状...

MySQL インポートおよびエクスポートのバックアップの詳細

目次1. MySQLのバックアップタイプの詳細な説明1. バックアップがデータベースに与える影響に基...

show processlist コマンドによる MySQL パフォーマンス検査の説明

show processlist コマンドは非常に便利です。MySQL の実行が 50% 以上になる...

JavaScript でクールなマウス テーリング効果を実装

これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!...

CentOS7.4 で JDK1.8 をインストールするためのグラフィカル チュートリアル

Linux インストール JDK1.8 手順1. CentOS に独自の openJDK があるかど...

画像とテキストでHTTPヘッダーのあらゆる側面を理解する

HTTPヘッダーとはHTTP は「Hypertext Transfer Protocol」の略です。...

単一行関数と文字計算日付プロセス制御を説明する MySQL の例

目次1. キャラクター機能1. ケースコントロール機能2. キャラクターコントロール機能2. 数学関...

SCSS スタイルのコードを 50% 削減する 14 の実践的な経験

序文Sass は CSS3 言語の拡張機能です。Sass を使用すると、より良いスタイルシートをより...

JavaScript関数の使い方の詳細な説明

目次1. 関数を宣言する2. 関数の呼び出し3. 関数パラメータ4. 関数の戻り値5. 議論の使用6...

HTML4.0 要素のデフォルトスタイルの配置

コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...

Django は Pillow を使用して検証コード機能を簡単に設定します (Python)

1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...

MySQL 5.7.17 でパスワードを忘れた場合の対処方法

1. my.iniファイルにskip-grant-tablesを追加し、MySQLサーバーを再起動し...

MySQLのExcelへのエクスポート方法の分析

この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...

docker+jenkins+node.js の自動デプロイメント環境をゼロから構築する方法

このケースはCentOS 7システムに基づいていますDockerの使用経験がある人に適していますLi...

MySQLレジストリをクリアする方法

具体的な方法: 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...