在前端开发中有时需要获取窗口的大小以实现自适应布局或其他功能，而 npm 包 window_size 就是一个方便获取窗口大小的工具。本文将介绍如何使用 window_size 包，包括安装和基本用法，同时还将深入讨论其原理和在实际开发中的应用。
安装和引用 window_size 包
window_size 包可以通过 npm 包管理工具进行安装，在命令行中运行以下命令即可完成安装：
npm install window_size --save
安装完成后，在需要使用 window_size 的 JavaScript 文件中引入该包：
const windowSize = require('window_size');基本用法
window_size 包提供了两个获取窗口大小的方法：getSize 和 getViewportSize。getSize 方法可以获取包括浏览器菜单栏、工具栏以及滚动条在内的整个窗口大小，而 getViewportSize 方法只获取窗口中 web 内容部分的大小。
使用 getSize 方法
getSize 方法的调用如下：
let size = windowSize.getSize();
console.log(`the size of window is ${size.width} x ${size.height}`);getSize 方法的返回值是一个对象，包含 width 和 height 两个属性，表示窗口的宽和高。上述代码可输出类似如下格式的信息：
the size of window is 1024 x 768
使用 getViewportSize 方法
getViewportSize 方法的调用如下：
let size = windowSize.getViewportSize();
console.log(`the viewport size of window is ${size.width} x ${size.height}`);getViewportSize 方法的返回值也是一个对象，包含 width 和 height 两个属性，表示窗口的宽和高。上述代码可输出类似如下格式的信息：
the viewport size of window is 1024 x 648
注意，由于浏览器可能存在滚动条等元素，getViewportSize 方法返回的高度值可能小于窗口的整体高度。
深入探讨 window_size 包的原理
window_size 包内部实现原理其实非常简单，只需要获取浏览器窗口对象的 innerWidth 和 innerHeight 属性即可。这两个属性表示窗口的视图区域的宽和高，不包括滚动条等边框和工具栏。因此通过这两个属性计算出窗口的宽和高即可。
window_size 包的源文件可以在 GitHub 上找到。希望有兴趣的读者可以更深入地了解该包的实现原理。
实际应用
window_size 包的应用非常广泛，可以通过获取窗口大小实现自适应布局或动态加载图片等功能。以下是一个示例代码，实现根据窗口大小调整页面布局的功能，当窗口宽度小于 500 时页面左右布局变为上下布局：
-- -------------------- ---- -------
----- ---------- - -----------------------
-------- -------------- -
----- ---- - -----------------------------
-- ----------- - ---- -
--------------------------------------------- - -------
---------------------------------------------- - -------
-------------------------------------------- - --------
----------------------------------------------- - --------
- ---- -
-------------------------------------------- - -------
----------------------------------------------- - -------
--------------------------------------------- - --------
---------------------------------------------- - --------
-
-
--------------------------------- --------------
---------------上述代码会在窗口大小改变时实时调整页面布局。通过获取窗口大小并调整显示样式，可以轻松实现完美的自适应布局效果。当然，实际使用时还需要进行更加详细和复杂的内容布局和样式调整。
总结
window_size 包是一个简单实用的获取窗口大小的 npm 包，可以帮助我们轻松实现自适应布局等功能。通过本文的介绍，读者应该已经能够安装和使用 window_size 包了，并深入了解了其原理和实际应用。希望读者能够在实际开发中灵活运用该包，并探索更多有趣和实用的前端技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d181e8991b448e490f