HTML | 窗口大小属性

HTML提供了window.innerHeight和window.innerWidth属性来获取浏览器窗口的高度和宽度。

window.innerHeight

window.innerHeight属性返回以像素为单位的内部高度，即不包括工具栏和滚动条的页面视口的高度。

console.log(window.innerHeight);

window.innerWidth

window.innerWidth属性返回以像素为单位的内部宽度，即不包括工具栏和滚动条的页面视口的宽度。

console.log(window.innerWidth);

这两个属性通常在响应式设计中使用，以根据浏览器视口大小调整元素的布局。

resize事件

在窗口大小变化时，可以使用resize事件来触发相应的操作。

window.addEventListener("resize", function() {
    // 这个函数将在浏览器窗口大小变化时执行
});

注意，为了避免性能问题，可以使用debouncing技术限制事件处理程序的触发频率。

总结

window.innerHeight和window.innerWidth属性提供了一种方便的方式来获取浏览器窗口的大小和响应窗口大小变化的事件。它们在实现响应式设计时非常有用。