不用addEventListener(‘resize‘, this.resize)，用新的Web API ResizeObserver监听DIV元素尺寸的变化

响应式设计指的是根据屏幕视口尺寸的不同，对 Web 页面的布局、外观进行调整，以便更加有效地进行信息的展示。我们日常生活中接触的很多应用都遵循响应式的设计。

响应式设计如今也成为 web 应用的基本需求，而现在很多 web 应用都已经组件化，这意味着我们如果想要实现响应式的应用，那么我们也需要有某种方式监听 「组件/元素」 大小的变化，以便让 「组件/元素」 也做到响应式。

在 ResizeObserver 出现之前，我们也有一些实现响应式布局的方案，包括：

• JS 方案——window.onresize /window.matchMedia。
• CSS 方案——媒体查询。

但它们都各自有一些问题。

 ResizeObserver接口用于报告一个元素的尺寸变化。

ResizeObserver是新的实验中的API，可以通过构造一个 ResizeObserver 对象以观察者模式监听任意 Element / SvgElement 的尺寸变化。除了chrome 64+ 和最新的 Edge Insider版支持，其他浏览器均不支持此API。但有第三方的polyfill方案，可以支持到 FF44+，IE9+，Edge 10+ ，Safari 11+ ，兼容方案是通过 MutationObserver API 实现的，通过监听 dom 的变化