addEventListener('resize', this.resize) の代わりに、新しい Web API ResizeObserver を使用して DIV 要素のサイズの変化を監視します。

レスポンシブデザインとは、情報をより効果的に表示するために、画面のビューポートサイズに応じて Web ページのレイアウトや外観を調整することを指します。私たちが日常生活で接触する多くのアプリケーションはレスポンシブデザインに従っています。

レスポンシブデザインは現在、Web アプリケーションの基本要件となっており、多くの Web アプリケーションはコンポーネント化されています。つまり、レスポンシブアプリケーションを実装したい場合は、「コンポーネント/要素」のサイズを監視する何らかの方法も必要です。 「コンポーネント/要素」 が応答します。

ResizeObserver が登場する前には、レスポンシブレイアウトを実装するための次のようなソリューションもありました。

JS ソリューション - window.onresize /window.matchMedia.

CSS スキーム – メディアクエリ。

しかし、彼らは皆それぞれ独自の問題を抱えています。

ResizeObserverインターフェイスは、要素のサイズ変更を報告するために使用されます。

ResizeObserver は、ResizeObserver オブジェクトを構築することで、オブザーバーモードで任意の Element / SvgElement のサイズ変更を監視できる新しい実験的な API です。Chrome 64 以降と最新の Edge Insider バージョンのサポートに加えて、他のブラウザはこの API をサポートしていません。ただし、FF44+、IE9+、Edge 10+、および Safari 11+ をサポートできるサードパーティのポリフィルソリューションがあります。互換性ソリューションは、MutationObserver API を通じて実装されます。dom の変更を監視し、判断することで、すべての主流ブラウザがそれを実行します。非ポーリング監視なので、パフォーマンスの問題はありません。

ResizeObserver オブジェクトは、サイズ変更が検出されたときに実行する必要があるアクションを定義するコールバック関数を使用して作成されます。このオブジェクトのobserv()メソッドは、追跡される要素に使用されます。

これにより、変更がないかチェックされ、サイズの変更が検出された場合はコールバック関数が実行されます。

GitHub - que-etc/resize-observer-polyfill: サイズ変更オブザーバー API のポリフィルサイズ変更オブザーバー API のポリフィル。GitHub でアカウントを作成して、que-etc/resize-observer-polyfill の開発に貢献してください。https://github.com/que-etc/resize-observer-polyfill

import ResizeObserver from 'resize-observer-polyfill';//npm install resize-observer-polyfill --save-dev
export default {
    data() {
        return {
            rb: null,
        }
    },
    mounted() {
        this.addResizeObserver(监听div元素);
    },
    destroyed() {
        this.removeResizeObserver(监听div元素);
    },
    methods: {
        // 监听视窗尺寸变化
        addResizeObserver(element) {
            this.rb = new ResizeObserver(entries => {
                entries.forEach(({ target, contentRect }) => {
                    switch (target) {
                        case element:
                            console.log(`对应的元素尺寸变化的值`, contentRect);
                            break;
                    }
                });
            });
            this.rb.observe(element);
        },
        // 移出监听视窗尺寸变化
        removeResizeObserver(element) {
            this.rb.unobserve(element);
        },
    },
};

addEventListener('resize', this.resize) の代わりに、新しい Web API ResizeObserver を使用して DIV 要素のサイズの変化を監視します。

おすすめ