創(chuàng)建反應式和響應式的網站以前被認為是高級的，但是響應性是成功的網站和應用程序的必要條件。我們增加了媒體的質疑，matchMedia以及其他的API，幫助開發(fā)者主機使反應更容易，現在我們得到了一個新問題： ResizeObserver。借助Resize Observer API，我們可以監(jiān)視各個元素的大??！

使用 ResizeObserver

要偵聽元素的大小更改，請創(chuàng)建一個ResizeObserver實例并調用observe，并傳遞一個元素：

const observer = new ResizeObserver(entries => {   for (let entry of entries) {     // Now do something with the resized element     if (entry.contentRect.width < 1000) {       // Stop making AJAX calls for content...     }   } }); observer.observe(document.querySelector('div'));

Anentry為您提供了目標元素及其尺寸和位置：

entry = {   target: div, // The element passed to `observe`   contentRect: {   bottom: 88,   height: 88,   left: 0,   right: 1043,   top: 0,   width: 1043,   x: 0,   y: 0   } }

媒體查詢和matchMedia提供了一個通過CSS調整顯示的機會，但不是功能，這是ResizeObserver適合的地方。

幾年前，我創(chuàng)建了一個黑客來監(jiān)視使用CSS、媒體查詢和:以前的元素，但它需要通過JavaScript輪詢才能正常工作。有一個合法的，優(yōu)化的JavaScript API來完成同樣的任務是令人耳目一新并且迫切需要的!