如何使用 jQuery 使用媒体查询

媒体查询是一种CSS技术，它可以根据设备屏幕的大小、分辨率和方向等特性来应用不同的样式和布局。而 jQuery 是一种JavaScript库，它可以方便地处理文档对象模型（DOM）和事件处理。结合两者，我们可以实现一个响应式的网站。

1. 引入 jQuery 库

在HTML文档中引入 jQuery 库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. 编写媒体查询 CSS 样式

在 CSS 样式表中定义媒体查询：

@media screen and (max-width: 768px) {
  /* 在设备宽度小于等于768像素时应用下列样式 */
  body {
    background-color: yellow;
  }
}

3. 使用 jQuery 操作样式表

使用 jQuery 的 css() 方法来操作样式表：

$(document).ready(function() {
  if ($(window).width() <= 768) {
    $("body").css("background-color", "yellow");
  }
});

在页面加载完成后，判断设备屏幕宽度是否小于等于768像素，若是，则将 body 的背景色改为黄色。

4. 监听窗口改变事件

当屏幕旋转或调整大小时，需要重新应用样式。可以使用 jQuery 的 resize() 方法监听窗口大小改变事件：

$(window).resize(function() {
  if ($(this).width() <= 768) {
    $("body").css("background-color", "yellow");
  } else {
    $("body").css("background-color", "");
  }
});

总结

使用 jQuery 操作媒体查询 CSS 样式表可以使我们更加方便地实现响应式网页设计。注意，使用 jQuery 操作样式表可能会影响性能，应谨慎使用。