在前端开发中，我们经常需要根据浏览器窗口的大小改变页面的布局和样式。而jQuery提供了一个方便的方法来快速检测窗口宽度，从而实现响应式设计。
使用$(window).width()方法
jQuery提供了一个$(window).width()方法，可以获取当前窗口的宽度（单位为像素）。下面是使用该方法的示例代码：
$(window).resize(function(){
var windowWidth = $(window).width();
if(windowWidth > 768){
// do something
}else{
// do something else
}
});上述代码中，我们首先使用了$(window).resize()方法来监听窗口大小的变化。当窗口大小改变时，我们可以通过调用$(window).width()方法来获取新的窗口宽度，然后根据窗口宽度的不同执行不同的操作。
响应式网站设计
使用$(window).width()方法可以方便地实现响应式网站设计。例如，在移动设备上通常需要隐藏一些大屏幕设备上显示的内容，以免页面过于拥挤。下面是一个简单的响应式网站设计的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------- --------------
-------
------- -
------- -----
----------------- -----
-
---- -
-------- -----
----------------- -----
-
------ ------ --- ----------- ------ -
---- -
-------- ------
-
-
--------
-------
------
---- ---------------------
---- ------------------
------- -----------------------------------------------------------
--------
----------------------------
--- ----------- - ------------------
-------------- - -----
-----------------
------
-----------------
-
---
---------
-------
-------上述代码中，我们使用@media查询来根据窗口宽度的不同应用不同的CSS样式。在小屏幕设备上，我们将导航菜单隐藏起来；而在大屏幕设备上，我们将其显示出来。
同时，我们使用了$(window).resize()方法来监听窗口大小的变化，并根据新的窗口宽度来决定是否显示或隐藏导航菜单。
结论
jQuery提供了一个简单而实用的方法来快速检测当前窗口的宽度。通过使用该方法，我们可以方便地实现响应式网站设计，并为用户提供更好的访问体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13391
