我可以检测浏览器调整大小事件吗？

Question

我正在构建一个简单的 4 窗格对象编辑器，画布大小有点问题。我了解到我不应该在 CSS 中调整画布的大小，而应该定义明确的像素宽度和高度。我一直在尝试设置所有内容，以便在调整浏览器大小时即时调整所有内容，所以我基本上有一个 5x5 表，其中第 1,3 和 5 行的高度为 5px，第 1,3 和第 5 列的高度为宽度为 5px。剩下的四个单元格的大小都相同。

我在每个找到的表格单元格中放置了一个 div，并使用 CSS 为 div 提供了背景和边框，以及 0px 的填充。我没有指定宽度或高度（但我也尝试过 100%）。

我在每个 div 中放置一个画布，并且在所有内容都布置好之前不指定尺寸。之后，我读取了其中一个表格单元格的宽度和高度，并据此设置了每个画布的大小。它工作正常，除了我在每个画布的底部和包含 div 的边界之间有一个奇怪的 3px 间隙。对于表格，我指定了 padding: 0px;边框间距：0px；和边框折叠：折叠；对于 td 单元格，指定了 padding: 0px;

差距是问题#1。

第二个问题是，因为每个画布都定义了它的宽度和高度，屏幕上的所有其他组件都会随着窗口大小的变化而自动调整大小，但画布元素保持不变。我可以以某种方式检测窗口调整大小事件并重新生成画布元素吗？理想情况下，由于在可见时调整大小有点慢，我想在调整大小开始时隐藏或删除元素，并在调整大小完成时重建并显示它们。 ？？？

Answer 1

$(window).resize(function() {
    // handle accordingly
});

Answer 2

试试resize^jQuery:

$(window).resize(function(){
    // regenerate canvas
});