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データベースでスロークエリログを有効にする方法の詳細な説明
序文gdb は Linux で非常に便利なデバッグ ツールです。コマンドライン モードのデバッグ ツ...
目次導入リンク始めるコードを読み進めてくださいプロキシ設定傍受を要求する異なるプレフィックスを持つイ...
コンテナが起動した後まず管理者にログインして新しいユーザーを作成してください $ docker ex...
この記事の例では、検証コードの動的干渉を実装するためのjsの具体的なコードを共有しています。具体的な...
イベント委任を使用してメッセージ ボード機能を実装します。 <!DOCTYPE html>...
スティッキーフッターレイアウトとは何ですか?一般的な Web ページのレイアウトは、通常、ヘッダー部...
この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...
目次1. シーン紹介2 コードの最適化2.1 ファンを増やす問題を解決する2.2 作品追加の問題を解...
目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...
Centos にプロジェクトをデプロイするときに奇妙な問題が見つかりました。データベース接続で例外...
この記事では、参考までに、簡単な計算機機能を実現するためのVueの具体的なコードを紹介します。具体的...
目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...
目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...
まずサンプルコードを見てみましょう: 1. 共通パラメータ tcpdump -i eth0 -nn ...
Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...