Vue で rem 適応を使用する方法

Vue で rem 適応を使用する方法

1. 開発環境vue
2. コンピュータシステム Windows 10 Professional Edition
3. Vueを使用してモバイル端末を開発する過程で、互換性のために頭を悩ませることがあります。Vueでrem自己適応を使用する方法を共有したいと思います。お役に立てば幸いです。
4. では、早速本題に入りましょう。

//postcss-pxtoremをインストール
npm i postcss-pxtorem -S

5. src ディレクトリに新しい rem フォルダーを作成し、新しい rem.js を作成して、次のコードを追加します。

// 基本サイズ const baseSize = 37.5
// rem関数を設定する function setRem() {
 const salepro = document.documentElement.clientWidth / 750
 // 現在のページ幅は 750 幅を基準としています。必要に応じて変更できます。
 // ページのルートノードのフォントサイズを設定します。 document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'
}
// setRem() を初期化する
// ウィンドウサイズを変更するときに rem をリセットする
window.onresize = 関数 () {
 リセット()
}

6. プロジェクトのルート ディレクトリに新しい .postcssrc.js を作成し、次のコードを追加します。

モジュール.エクスポート = {
 「プラグイン」: {
 "postcss-pxtorem": {
  "ルート値": 37.5,
  "propList": ["*"]
 }
 }
}

注: 私の設定では比率は 1:1、つまり設計図の幅は 750px です。CSS で width:750px; と書くだけで、変換は不要です。すばらしいと思いませんか?

7. main.js にインポートする

'@/rem/rem.js' をインポートします

8. Vue テンプレートで使用し、次のコードを CSS に追加します。

<style lang="scss" スコープ>
。について {
 幅: 750ピクセル;
 高さ:100vh;
 ボックスのサイズ: 境界線ボックス;
 背景色: 青 !重要;
 .kk {
  幅: 350ピクセル;
  高さ: 350ピクセル;
  背景色: 赤;
 }
}
</スタイル>

9. 効果図は次のとおりです。

10. これでこの共有は終わりです。これが皆さんのお役に立てば幸いです。一緒に頂点を目指しましょう。

上記は、Vue が rem 適応を使用する方法の詳細です。Vue が rem 適応を使用する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue CLI3 モバイル適応 (px2rem または postcss-plugin-px2rem)
  • モバイル適応のために postcss-pxtorem を使用する vue の問題について
  • Vue での px2rem サンプルコードの適応
  • Vueはモバイル画面への適応を実現するためにremを使用する
  • vue2.0 のさまざまな画面適応と px と rem の変換の問題の詳細な説明

<<:  Linux 上で Python3.6 をコンパイルしてインストールするための詳細なチュートリアル

>>:  MySQLデータベースでスロークエリログを有効にする方法の詳細な説明

推薦する

MySQL 学習: 初心者のための 3 つのパラダイム

目次1. パラダイム基盤1.1 パラダイムの概念2. 3つの主要なパラダイム2.1 3つの主要なパラ...

Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法

Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...

MySQL サーバーにおける SSD パフォーマンスの問題の詳細な分析とテスト

【質問】 HP サーバーを使用しています。SSD が IOPS 約 5000 を書き込むと、%uti...

Reactイベントバインディングの詳細な説明

1. 何ですかreactアプリケーションでは、イベント名はキャメルケース形式で記述されます。たとえ...

TypeScript とは何ですか?

目次1. JavaScriptの問題2. TypeScriptの利点3. TypeScriptの欠点...

mycat を使用して MySQL データベースの読み取りと書き込みの分離を実装する例

MyCATとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベースク...

Docker x509 の安全でないレジストリ問題を解決する

Docker をインストールした後、会社が構築したプライベート サーバー Harbor からプルしよ...

React を使って小さなプログラムを書くための Remax フレームワークのコンパイル プロセス分析 (推奨)

Remax は、実行時に構文制限のないソリューションを採用した React を使用して小規模なプロ...

MySQL ステートメントロックの実装の分析

概要: 2 つの MySQL SQL ステートメント ロックの分析次のSQL文にどのようなロックが追...

HTML テーブル マークアップ チュートリアル (29): セルのライト境界線の色属性 BORDERCOLORLIGHT

セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...

MySQLプロセスを安全かつ適切にシャットダウンする方法

序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...

MySQL が my.cnf を読み込む順序の詳細

目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...

DockerにELKをインストールしてJSON形式のログ分析を実装する方法

ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...

SSDストレージを有効にしたMySQLインスタンスの詳細な説明

SSDストレージを有効にしたMySQLインスタンスの詳細な説明特に OS と MySQL が同じディ...