ホームページ > 記事 > ウェブフロントエンド > 大画面要素の解像度適応を実装する Vue 命令の詳細な説明

大画面要素の解像度適応を実装する Vue 命令の詳細な説明

WBOY転載: 2022-10-02 09:00:282891ブラウズ

この記事では、vue に関する関連知識をお届けします。主に、一般的な適応スキームや CSS スケーリングスキームなど、大画面要素の解像度適応を実装するための Vue 命令の詳細な説明を紹介します。ぜひ一緒にご覧ください。皆さんのお役に立てれば幸いです。

[関連する推奨事項: javascript ビデオチュートリアル、vue.js チュートリアル]

フロントエンドを使用するデータセンター (ミドルプラットフォーム) およびその他のコンセプトの継続的な開発、およびモノのインターネットデバイスの更新と普及により、データを集中表示するために 1 つまたは複数の大きなビジュアルスクリーンをシステムに追加することを希望する所有者 (プロジェクト) が増えています。上司もそれを「状況」と呼ぶことを好みます。

もちろん、プログラマはプロジェクトを完了する限り、「上司」が何を考えているかは一般に気にしません。しかし、次のような問題がよく発生します。大画面のテンプレートがあるが、ユーザーのブラウザの解像度が十分ではない、ブックマークバーがあるテンプレートとないテンプレート、または全画面のテンプレートと小さなウィンドウだけのテンプレートがあります。このように、コードがさまざまな解像度のシナリオに適応するための要件があります。

1. 一般的な適応ソリューション

通常使用する Web 側の適応ソリューションには主に次のものがあります:

vw/vh はパーセンテージで実装され、ウィンドウサイズに応じて要素を自動的に調整できます。
fontSize を rem と組み合わせて、「単位幅」の統一を実現します。
さまざまな解像度範囲に応じてページレイアウトを調整します
最小幅の中央レイアウト

最新の画面適応ソリューションの原則は上記の方法に基づいていますが、これらの方法には大きな欠点もあります。ブラウザテキストには最小幅があります。サイズ！

解像度 1080p 以上の通常の画面では、ほとんどの設計図面の比率と表示効果を完全に復元できます。ただし、特定のシステムにページコンテンツが多すぎる場合、またはブラウザで使用されている解像度 (物理解像度ではない) が完全な表示要件を満たしていない場合、上記の方法を使用すると、 テキストのサイズが計算される可能性があります。ブラウザの最小フォントサイズ より小さい場合、テキスト幅が要素を超えるため、ページスタイルが崩れる可能性があります。

中央レイアウトと最小幅は表示効果を確保できますが、大画面プロジェクトには適していません。

2. CSS3 スケーリングソリューション

上記の解決策が満足できない場合、通常、誰もが別の解決策、CSS3 スケールスケーリングを使用します。

設計図のサイズ比率と実際のページ表示領域サイズを計算し、要素の拡大縮小率を動的に調整します。

個人的には、これが小さな解像度で表示コンテンツとスタイルを保持する最良の方法だと思います。

もちろん、この方法にはまだいくつかの欠点があります。

スケーリング後、端の表示がぼやける可能性があります。
内部に Canvas 要素がある場合、ぼやけてしまう可能性があります。キャンバスの内側がぼやける原因になります。コンテンツのレンダリングに歪みが発生します。
Amap 1.x では、イベント座標オフセットが発生します (2.0 は修正されています)
...

3. カプセル化スケーリング命令

ここでは、Vue のカスタム命令の簡単なレビューを示します: カスタム命令を構成し、パラメーターをバインドすることにより、対応する処理ロジックが、component/ などの異なる時点で実行されます。要素のロード、更新、および破棄。

Vue のカスタム命令には、次のフック関数が含まれます。

bind: 命令バインディングの解析時に実行され、一度のみ実行されます。
inserted: 親を挿入します。ノードが作成されたときに実行されます。
update: コンポーネントが更新をトリガーしたときに実行されます。
componentUpdated: すべてのコンポーネントが更新された後に実行されます。
unbind: 要素がバインドされていない (破棄された) ときにのみ実行されます。 1 回実行

#ここでは、初期化中に要素のスケーリングを調整するためにブラウザのサイズ変更イベントをバインドするだけでよいため、コードロジックを最適化しリソースを削減するために、挿入された設定のみが必要です。消費などの場合は、アンバインド段階でリサイズイベントのコールバック関数をキャンセルする必要もあります。

コードは次のとおりです。

// 缩放指令
import Vue from "vue";
function transformScale(el, options) {
  const { target = "width", origin = "top left" } = options;
  Vue.nextTick(() => {
    // 获取显示区域高宽
    const width = window.innerWidth;
    const height = window.innerHeight;
    el.style.transformOrigin = origin;
    if (target === "ratio") {
      const scaleX = width / CONF.width;
      const scaleY = height / CONF.height;
      el.style.transform = `scaleX(${scaleX}) scaleY(${scaleY})`;
    } else {
      let scaleProportion = 1;
      if (target === "width") {
        scaleProportion = width / CONF.width;
      }
      if (target === "height") {
        scaleProportion = height / CONF.height;
      }
      el.style.transform = `scale(${scaleProportion})`;
    }
  });
}
function inserted(el, binding) {
  const options = binding.options || { passive: true };
  const callback = () => transformScale(el, binding.value);
  window.addEventListener("resize", callback);
  callback();
  el._onResize = {
    callback,
    options
  };
}
function unbind(el) {
  if (!el._onResize) {
    return;
  }
  const { callback } = el._onResize;
  window.removeEventListener("resize", callback);
  delete el._onResize;
}
export const Scale = {
  inserted,
  unbind
};
export default Scale;

説明:

デフォルトのページサイズを指定するように CONF オブジェクトをグローバルに構成します
ページがロードされ、dom 要素を取得できることを確認するには、Vue.nextTick を呼び出す必要があります
リッスンイベントを破棄する必要があります

コード全体は実際には非常に単純で、サイズ変更イベントをリッスンして要素のズーム率を調整するというものです。

しかし、ここでは、より多くの状況に適応するために少しの構成も作成しました:

ターゲット設定を受信して比率の計算方法を確認します。幅または高さを統一スケーリング基準として使用することも、個別に計算することもできます。
変換の元の設定を受信して要素を確認しますさまざまな位置でオフセットのスケーリングを避けるために、さまざまな位置にズームできます。
バインドされた要素のサイズは関係せず、デフォルトのサイズのみが必要です。コードを記述するときに、それに応じて要素のサイズを直接構成できます。設計図へ

もちろんこのコマンドも完璧とは言えず、手ぶれ補正がない、拡大縮小してもCSSで指定したサイズが変わらない、スクロールバーなど抜け道はまだたくさんあります。などが表示される傾向があります;

そして、以前の理由により、このプロジェクトには多くのチャートやマップも含まれており、表示上の問題が発生することが多いため、後でいくつかの新しい指示が追加されますが、解像度の適応は実際の状況に基づいて決定する必要があります。

【関連する推奨事項: JavaScript ビデオチュートリアル、vue.js チュートリアル ]

以上が大画面要素の解像度適応を実装する Vue 命令の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css css3 vue.js 封装回调函数 JS 对象事件 dom transform canvas 物联网数据中心

声明：

この記事はjb51.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Vue コンポーネント間の通信方法の詳細な分析次の記事：Vue コンポーネント間の通信方法の詳細な分析

続きを見る

大画面要素の解像度適応を実装する Vue 命令の詳細な説明

1. 一般的な適応ソリューション

2. CSS3 スケーリング ソリューション

3. カプセル化 スケーリング命令

関連記事

2. CSS3 スケーリングソリューション

3. カプセル化スケーリング命令