onresize
onresize 事件會在窗口或框架被調整大小時發生。當需要對窗口大小變化做監聽時，可以使用。例如我們需要在窗口大小改變的時候改變某個元素的寬高或者執行某個函數。
<body onresize="resizeFun()">
window.onresize = function() {
// SomeJavaScriptCode
};
除了 body 標籤，其他標籤設置 onresize 屬性並不起作用。
<p οnresize="resizeFun()"
window 還有個 resizeTo 方法用於把窗口大小調整爲指定的寬度和高度：
window.resizeTo(500,300)
ResizeObserver
Resize Observer API 提供了一種高性能方法可以監視元素的大小更改。相比於 Css 媒體查詢的侷限性和 window resize 的單一性 Observer API 夠輕鬆觀察並以高效的方式響應元素內容或邊框的大小變化。
可以使用 ResizeObserver()構造函數創建一個新對象，然後使用 ResizeObserver.observe()它來尋找更改特定元素大小的對象。每當大小更改時，構造函數中設置的回調函數便會運行，從而提供對新維度的訪問權限，並允許您根據需要執行任何操作。
- ResizeObserver.disconnect()
取消觀察 Element 特定觀察者的所有觀察目標。
- ResizeObserver.observe()
啓動對指定的觀察 Element。
- ResizeObserver.unobserve()
結束對指定的觀察 Element。
例如，我們需要監聽 A 元素的變化來改變 B 元素的寬度：
const resizeObserver = new ResizeObserver(entries => {
this.BWidth = document.getElementById("A").clientWidth - 20;
});
resizeObserver.observe(document.getElementById("A"));
// 在不需要監聽的時候或離開界面的時候銷燬
resizeObserver.disconnect();
在 Vue 中使用示例：
const resizeObserver = new ResizeObserver(entries => {
this.BWidth = document.body.clientWidth - 20;
});
resizeObserver.observe(document.body);
this.$once("hook:beforeDestroy", () => {
resizeObserver.disconnect();
});
react中使用示例：
async componentDidMount() {
this.resizeObserver = new ResizeObserver(entries => {
this.BWidth = document.body.clientWidth - 20;
});
this.resizeObserver.observe(document.body);
}
componentWillUnmount() {
this.resizeObserver.disconnect();
}