構成の序文プロジェクト構築: vue-cli3 をベースに構築、rem 適応には postcss-px2rem px2rem-loader を使用 実装の原則: パッケージ化するたびに、webpackはプラグインpostcss-px2remを使用してpx単位をrem単位に自動的に変換します。 px2rem は、px を rem に自動的に変換するプラグインであり、開発者がピクセル間の相互変換の計算プロセスを削減するのに役立ちます。 この先に落とし穴があります。UI フレームワークの一部のコンポーネントは、JavaScript を使用して CSS を HTML タグ内にインライン スタイルとして直接書き込みます。パッケージ化と適応中は関連する CSS が読み込まれないため、関連するスタイルを構成する必要があり、スタイルをオーバーライドするにはスタイル内に "!important" が必要です。 実装手順最初のステップは、postcss-px2remとpx2rem-loaderをインストールすることです。 コマンドラインツールを開き、次のコマンドを入力してプラグインをインストールします(もちろん、Taobaoミラーcnpmを使用してインストールする方が速くなります)。 npm をインストール postcss-px2rem px2rem-loader --save 2 番目のステップは、ルート ディレクトリ src の util ディレクトリに新しい rem.js ファイルを作成することです。 // rem 比例適応設定ファイル // 基本サイズ const baseSize = 16 // rem関数を設定する function setRem() { // 現在のページ幅を 1920 の幅に対して拡大縮小する比率。必要に応じて変更できます。 定数スケール = document.documentElement.clientWidth / 1920 // ページのルート ノードのフォント サイズを設定します ("Math.min(scale, 2)" は最大拡大率が 2 であることを意味します。実際のビジネス ニーズに応じて調整できます) document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' } // setRem() を初期化する // ウィンドウサイズを変更するときに rem をリセットする window.onresize = 関数 () { リセット() } 3番目のステップは、main.jsにアダプタファイルを導入することです。 './util/rem' をインポートします ステップ4: vue.config.jsでプラグインを構成する // 比例適応プラグインをインポートします const px2rem = require('postcss-px2rem') // 基本サイズを設定する const postcss = px2rem({ // 基本サイズ baseSize、rem.js と同じである必要があります remUnit: 16 }) // 比例適応プラグインを使用する module.exports = { 保存時にlint: true、 css: { ローダーオプション: { ポストcss: { プラグイン: [ ポストCSS ] } } } } 要約するこれで、vue+px2rem による PC での大画面対応についての記事は終了です。vue+px2rem による大画面対応に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL における or、in、union、インデックス最適化の詳細な分析
>>: SQL ストアド プロシージャの取得、データ取得、プロセス分析
今日、Nginxを使っていたら500エラーが発生しました。エラーコードを検索してみんなに共有しました...
目次序文数独の解き方最初のボックスに記入してください2番目のボックスに記入してください3番目のボック...
序文クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要があり...
この記事では主にボタンのスタイルについて説明します。 1. オプション2. サイズ3. 活動状況4....
<body style="scroll:no"> <テーブルの...
1. HTML部分 <Col span="2">ファイルをアップロー...
この記事は主に、PostgreSQL データベースを記述して解析を実装する SQL スクリプト関数を...
自動検出を行う際には、ポートなどの情報を取得してjson形式で返すスクリプトが必ず存在します。Red...
現象の説明:プロジェクトでは、Springboot を使用して Web プロジェクトを開始します。起...
いくつかの理由(好奇心も含む)から、数週間前に Linux デスクトップとして Xfce を使い始め...
今日はベテランの貴重な経験を共有します。著者は技術管理の経験が7年あり、多い時は80人以上を率いてい...
CSS 画面サイズの適応を実現するには、まず CSS3 @media メディア クエリを導入する必要...
<br />原文: http://andymao.com/andy/post/103.h...
Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...
この記事では、MySQL 5.7.17のインストールと設定方法を参考までに紹介します。具体的な内容は...