调整观察者大小

创建反应式和响应式的网站以前被认为是高级的，但是响应性是成功的网站和应用程序的必要条件。我们增加了媒体的质疑，matchMedia以及其他的API，帮助开发者主机使反应更容易，现在我们得到了一个新问题： ResizeObserver。借助Resize Observer API，我们可以监视各个元素的大小！

使用 ResizeObserver

要侦听元素的大小更改，请创建一个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适合的地方。

几年前，我创建了一个黑客来监视使用CSS、媒体查询和:以前的元素，但它需要通过JavaScript轮询才能正常工作。有一个合法的，优化的JavaScript API来完成同样的任务是令人耳目一新并且迫切需要的!