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データベースでスロークエリログを有効にする方法の詳細な説明

推薦する

Linux での GDB 入門チュートリアル

序文gdb は Linux で非常に便利なデバッグ ツールです。コマンドライン モードのデバッグ ツ...

vue-nuxt ログイン認証の実装

目次導入リンク始めるコードを読み進めてくださいプロキシ設定傍受を要求する異なるプレフィックスを持つイ...

Docker 接続 MongoDB 実装プロセスとコード例

コンテナが起動した後まず管理者にログインして新しいユーザーを作成してください $ docker ex...

検証コード干渉を実装する js (動的)

この記事の例では、検証コードの動的干渉を実装するためのjsの具体的なコードを共有しています。具体的な...

この記事では、イベント委任を使用してJavaScriptメッセージボード機能を実装する方法について説明します。

イベント委任を使用してメッセージ ボード機能を実装します。 <!DOCTYPE html>...

CSS スティッキーフッタークラシックレイアウトの実装

スティッキーフッターレイアウトとは何ですか?一般的な Web ページのレイアウトは、通常、ヘッダー部...

Vueは製品の拡大鏡効果を実現します

この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...

JS でパブリッシュ サブスクライブ モデルを作成する

目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...

ノードイベントループにおけるイベント実行の順序

目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...

MySQL データベース接続例外の概要 (収集する価値あり)

Centos にプロジェクトをデプロイするときに奇妙な問題が見つかりました。データベース接続で例外...

Vueはシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機機能を実現するためのVueの具体的なコードを紹介します。具体的...

1分でVueが右クリックメニューを実装

目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...

ワンクリックで雨や雪のエフェクトを実現する ThingJS パーティクルエフェクト

目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...

Linux システムで tcpdump を使用してパケットをキャプチャする方法

まずサンプルコードを見てみましょう: 1. 共通パラメータ tcpdump -i eth0 -nn ...

Linux シェル環境での Zabbix API の使用

Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...