窗口大小调整完成 - JavaScript

在前端开发中，经常需要根据窗口大小调整布局或响应式设计。而在 JavaScript 中，我们可以通过 window 对象来获取窗口大小，并根据具体需求进行相应的操作。

获取窗口大小

我们可以使用 window.innerWidth 和 window.innerHeight 分别获取窗口的宽度和高度，值的单位为像素。

const width = window.innerWidth;
const height = window.innerHeight;

但是，需要注意的是这两个值并不包括浏览器的工具栏和滚动条的宽度。如果需要计算包括工具栏和滚动条的窗口大小，可以使用下面的方法：

const width = document.documentElement.clientWidth || window.innerWidth;
const height = document.documentElement.clientHeight || window.innerHeight;

通过 document.documentElement.clientWidth 和 document.documentElement.clientHeight 可以获取文档根元素的宽度和高度，同时也可以兼容一些低版本浏览器。

响应式布局

根据窗口大小调整布局是前端开发中常见的需求之一。可以通过监听窗口大小变化的事件来实现响应式布局，常见的有 resize 事件。

window.addEventListener('resize', function() {
  // 示例：根据窗口宽度判断是否显示侧边栏
  if (window.innerWidth < 768) {
    // 窗口宽度小于 768px，隐藏侧边栏
    sidebar.style.display = 'none';
  } else {
    // 窗口宽度大于等于 768px，显示侧边栏
    sidebar.style.display = 'block';
  }
});

在事件处理函数中可以根据具体情况调整布局，实现响应式设计。

结语

通过 JavaScript 可以轻松获取窗口大小，并可以根据具体需求进行相应的操作，实现各种布局和响应式设计。以上仅为简单示例，具体实现可以根据具体需求进行操作。