CSS 使用媒体查询来添加/删除类

在本文中，我们将介绍如何使用CSS媒体查询来添加或删除类。CSS媒体查询是一种强大的工具，可以根据设备的特性和浏览器视窗尺寸，自动应用不同的样式。通过添加或删除类，我们可以在不同的媒体查询条件下应用不同的样式，实现自适应的布局和风格。

阅读更多：CSS 教程

添加类

使用媒体查询来添加类是一种常见的技术，可以根据设备特性或视窗尺寸来应用不同的样式。首先，我们需要定义不同的媒体查询条件，并为每个条件定义对应的类。接下来，在HTML元素中使用类选择器，根据媒体查询的结果来添加对应的类。

下面是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
/* 默认样式 */
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

/* 在小于600px的视窗尺寸下应用的样式 */
@media (max-width: 599px) {
  .box {
    background-color: blue;
  }
}

/* 在大于1200px的视窗尺寸下应用的样式 */
@media (min-width: 1200px) {
  .box {
    background-color: green;
  }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在上面的示例中，我们定义了一个box类，并在不同的媒体查询条件下应用不同的样式。当视窗宽度小于600px时，box的背景颜色将变为蓝色；当视窗宽度大于1200px时，box的背景颜色将变为绿色。

删除类

除了添加类，我们还可以使用媒体查询来删除类。这在需要隐藏或移除某些元素样式时非常有用。与添加类相似，我们需要定义不同的媒体查询条件，并为每个条件定义对应的类。然后，我们可以使用classList属性的remove方法来删除类。

下面是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
/* 默认样式 */
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

/* 在小于600px的视窗尺寸下应用的样式 */
@media (max-width: 599px) {
  .hide {
    display: none;
  }
}
</style>
</head>
<body>
<div class="box hide"></div>
</body>
</html>

在上面的示例中，我们定义了一个hide类，并在小于600px视窗尺寸下将其隐藏。使用display: none样式可以使元素不可见。这里，我们将hide类应用于box元素，当视窗宽度小于600px时，box元素将被隐藏。

如果我们希望在特定的媒体查询条件下显示box元素，可以使用JavaScript来添加或删除hide类。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
/* 默认样式 */
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

/* 在小于600px的视窗尺寸下应用的样式 */
@media (max-width: 599px) {
  .hide {
    display: none;
  }
}
</style>
</head>
<body>
<div class="box" id="box"></div>

<script>
var box = document.getElementById("box");

window.addEventListener("resize", function() {
  if (window.innerWidth < 600) {
    box.classList.add("hide");
  } else {
    box.classList.remove("hide");
  }
});
</script>
</body>
</html>

在上面的示例中，我们使用JavaScript监听窗口大小的变化。如果窗口宽度小于600px，我们使用classList的add方法来添加hide类，隐藏box元素；如果窗口宽度大于等于600px，我们使用classList的remove方法来删除hide类，显示box元素。