在 jQuery 中检测屏幕宽度

对于前端开发人员而言，经常需要检测用户浏览器的屏幕宽度以调整页面布局或适配不同设备。在 jQuery 中，检测屏幕宽度非常简单。

使用 $(window).width()

jQuery 提供了一个方便的方法 $(window).width() 来获取当前窗口的宽度，此方法会返回一个整数表示窗口宽度像素数。

var window_width = $(window).width();
console.log('窗口宽度：' + window_width);

如果需要不断地检测窗口宽度的变化，可以使用 $(window).resize() 方法监听窗口大小改变事件。

$(window).resize(function() {
  var window_width = $(window).width();
  console.log('窗口宽度：' + window_width);
});

使用 CSS 媒体查询

除了 jQuery 提供的方法，还可以使用 CSS 媒体查询来检测屏幕宽度。CSS 媒体查询可以针对不同设备尺寸应用不同的样式。在媒体查询中，可以使用 max-width 或 min-width 属性来匹配屏幕宽度。例如，下面的代码会针对屏幕宽度小于 768px 的设备应用特定样式。

@media (max-width: 768px) {
  /* ... */
}

结论

在 jQuery 中检测屏幕宽度非常方便，可以使用 $(window).width() 方法和监听 $(window).resize() 事件来实现动态布局。此外，CSS 媒体查询也是检测屏幕宽度的好方法，可以对不同设备应用不同的样式，提高网站适配性。