1. 開発環境vue //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": ["*"] } } }
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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux 上で Python3.6 をコンパイルしてインストールするための詳細なチュートリアル
>>: MySQLデータベースでスロークエリログを有効にする方法の詳細な説明
目次1. パラダイム基盤1.1 パラダイムの概念2. 3つの主要なパラダイム2.1 3つの主要なパラ...
Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...
【質問】 HP サーバーを使用しています。SSD が IOPS 約 5000 を書き込むと、%uti...
1. 何ですかreactアプリケーションでは、イベント名はキャメルケース形式で記述されます。たとえ...
目次1. JavaScriptの問題2. TypeScriptの利点3. TypeScriptの欠点...
MyCATとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベースク...
導入最近、Docker の ARM バージョンがあることを知りました。 hub.docker.com...
Docker をインストールした後、会社が構築したプライベート サーバー Harbor からプルしよ...
Remax は、実行時に構文制限のないソリューションを採用した React を使用して小規模なプロ...
概要: 2 つの MySQL SQL ステートメント ロックの分析次のSQL文にどのようなロックが追...
セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...
序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...
目次MySQLがmy.cnfを読み込む順序1. mysql.server の起動方法2. mysql...
ELKとは何ですか? ELK は、Elastic が提供するログ収集およびフロントエンド表示ソリュー...
SSDストレージを有効にしたMySQLインスタンスの詳細な説明特に OS と MySQL が同じディ...