简介
在前端开发中，有时需要获取浏览器窗口的大小。而获取窗口大小是一项比较基础的操作，可以使用 window.innerWidth 和 window.innerHeight 来获取。但是，如果你需要在代码中不断地获取窗口大小，这种方法就显得不太方便了。这时候，我们可以使用一个 npm 包 window-size 来更便捷地获得窗口大小。
安装
要使用 window-size，首先需要在项目中安装它。可以通过以下命令来安装：
npm install window-size
使用
安装完成后，就可以在代码中引入 window-size 来获取窗口大小了。可以按照以下步骤来使用：
在 JS 文件中引入
window-size：const windowSize = require('window-size');调用
windowSize.get()方法来获取窗口大小：const size = windowSize.get(); console.log(size.width, size.height);
这里会输出当前窗口的宽度和高度。
示例代码
下面是一个示例代码，展示如何使用 window-size 来监听窗口大小的变化，并做出相应的处理：
-- -------------------- ---- ------- ----- ---------- - ----------------------- -------- -------------- - ----- ---- - ----------------- ------------------- ----- ------------- - ----------------- - --------------------------------- -------------- -- --- ---------------
这个示例代码会在窗口大小发生变化时，打印出新的窗口宽度和高度。它还会在页面加载时初始化一次，以获取初始窗口大小。
总结
window-size 是一个非常方便的 npm 包，可以帮助我们更便捷地获取浏览器窗口大小。使用它可以让我们的代码更简洁、更易读，并且能够更好地处理窗口大小的变化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50293