如何将CSS媒体查询结果传递给JS？

将CSS媒体查询结果传递给JS可以通过以下几种方式实现：

使用JavaScript的window.matchMedia()方法：这个方法可以在JavaScript中检测CSS媒体查询的结果。你可以使用window.matchMedia()方法传入一个CSS媒体查询字符串，然后使用matches属性获取查询结果。例如：

if (window.matchMedia("(max-width: 768px)").matches) {
  // 在视口宽度小于等于768像素时执行的代码
} else {
  // 在视口宽度大于768像素时执行的代码
}

使用window.getComputedStyle()方法：这个方法可以获取元素应用的所有CSS样式，包括媒体查询的结果。你可以通过获取特定元素的样式来判断媒体查询的结果。例如：

var element = document.getElementById("myElement");
var styles = window.getComputedStyle(element);
if (styles.getPropertyValue("width") === "768px") {
  // 在元素宽度等于768像素时执行的代码
} else {
  // 在元素宽度不等于768像素时执行的代码
}

使用CSS变量：你可以在CSS中定义一个变量，并在媒体查询中设置不同的值。然后在JavaScript中通过getComputedStyle()方法获取元素的样式，并读取CSS变量的值。例如：

CSS代码：

:root {
  --viewport-width: 768px;
}

@media (max-width: 768px) {
  :root {
    --viewport-width: 480px;
  }
}

JavaScript代码：

var rootStyles = getComputedStyle(document.documentElement);
var viewportWidth = rootStyles.getPropertyValue("--viewport-width");
if (viewportWidth === "768px") {
  // 在视口宽度等于768像素时执行的代码
} else {
  // 在视口宽度不等于768像素时执行的代码
}

这些方法可以根据CSS媒体查询的结果在JavaScript中执行相应的逻辑。在实际应用中，你可以根据具体的需求选择适合的方法来传递CSS媒体查询结果给JS。