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を使用)

推薦する

ユーザーエクスペリエンスの構築

<br />おそらく、あなたは会社に入社したばかりで、その会社が「ユーザビリティ」に関す...

円形/扇形メニューを2分で実装する方法を教えます(基本バージョン)

序文このプロジェクトでは円形のメニューが必要です。オンラインで検索しましたが、適切なものが見つからな...

Ubuntu 18.04 向け VMware Tools のインストールと構成のチュートリアル

この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...

要素複数フォーム検証の実装

プロジェクトでは、フォーム テストが頻繁に発生します。単一のフォーム テストについては、詳細な紹介が...

Nginx イントラネット スタンドアロン リバース プロキシの実装

目次1 Nginxのインストール2 Nginxの設定3 ホストファイルを変更する4 テストNginx...

MySQL マスター スレーブ データが矛盾しています。プロンプト: Slave_SQL_Running: 解決策はありません

この記事では、MySQL マスターとスレーブ データ間の不一致の解決方法と、プロンプト「Slave_...

Docker ベースの Selenium 分散環境の構築

1.画像をダウンロードするdocker pull selenium/hub docker pull ...

MYSQLパターンマッチングREGEXPの使用に関する一般的な話など

のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...

HTMLチェックボックス説明テキストをクリックして状態を選択/チェック解除します

Web 開発では、チェックボックスは小さく、ユーザーにとって操作があまり便利ではないため、ユーザーが...

Vue の匿名スロットと名前付きスロットの詳細な説明

目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...

MySQL グラフィカル管理ツール Navicat のインストール手順

目次序文1. 全員にインストールパッケージを用意する2. Navicatをインストールし、Navic...

Presto をインストールし、Docker で Hive を接続する詳細なプロセス

1. はじめにPresto は、ギガバイトからペタバイトに及ぶデータ ソースに対してインタラクティブ...

React仮想リストの実装

目次1. 背景2. バーチャルリストとは何か3. 関連概念の紹介4. 仮想リストの実装4.1 ドライ...

MySQLでの少し複雑な使用例コード

序文MySQL の構文は誰にとっても難しいものではないと思いますが、この記事では主に MySQL の...

deepin20 で NVIDIA クローズドソース ドライバーをインストールするための詳細な手順

ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...