REMプラグインを使用してVUEプロジェクトの画面サイズに適応した後、ページ更新の前後に一貫性のないディスプレイ効果の問題を解決する方法は？

VUEプロジェクトの適応とリフレッシュディスプレイの矛盾の問題の分析

VUEプロジェクトでは、REMユニットを使用してREMプラグイン（PX2REMローダーなど）を組み合わせて適応レイアウトを実現することが一般的です。ただし、ディスプレイ効果の違いは、ページの更新の前後に発生することがよくあります。この記事では、共通の状況とその解決策を分析します。

ユーザーの構成は次のとおりですvue.config.js ：

 const px2rem = require（ 'postcss-px2rem'）;
const postcss = px2rem（{
  remunit：192 //ベンチマークサイズはrem.jsと一致する必要があります}）;
module.exports = {
  CSS：{
    loaderoptions：{
      postcss：{
        プラグイン：[PostCSS]
      }
    }
  }
};

main.js ：

 './utils/flexible'をインポートします。
'./utils/rem'から{setReminit}をインポートします。
setReminit（）; //初期化

問題の顕現：ページの最初の読み込みパフォーマンスは不十分で（画像が省略されています）、効果はリフレッシュ後に正常です（画像省略）、前のページに返されたフォントは再び小さくなります。

根本原因：これは通常、 flexible.jsの使用に関連しており、画面幅に基づいてhtmlのfont-size動的に設定する責任がflexible.jsます。ただし、 flexible.jsの実行タイミングとpx2rem-loaderの変換タイミングには違いがあり、その結果、初期負荷中に不正確なREM計算が生じます。さらに、PX2REM/PX2VWなどのすべてのプロジェクトがソリューションのスケーリングに適しているわけではありません。

より良い解決策：ディスプレイプロジェクトまたは管理バックエンドの場合、さまざまな画面サイズのレスポンシブデザイン、プリセットブレークポイント、コンポーネントサイズを採用し、CSSグリッドレイアウトを使用することをお勧めします。これは、スケーリングスキームに依存するよりも柔軟性があり、同様の問題を回避します。初期段階でより多くの時間を投資して、レスポンシブブレークポイントとコンポーネントプリセットを設定し、その後のメンテナンスコストを削減し、プロジェクトの安定性を高めます。

以上がREMプラグインを使用してVUEプロジェクトの画面サイズに適応した後、ページ更新の前後に一貫性のないディスプレイ効果の問題を解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。