CSS媒体查询和JavaScript可以相互交互以实现更复杂的响应式设计和动态功能。以下是一些常见的方法：

1. 使用JavaScript检测媒体查询

你可以使用JavaScript来检测当前是否满足某个媒体查询条件。window.matchMedia() 方法允许你创建一个媒体查询对象，并检查它是否匹配当前视口。

// 创建一个媒体查询对象
const mq = window.matchMedia("(max-width: 600px)");

// 检查媒体查询是否匹配
if (mq.matches) {
    console.log("屏幕宽度小于等于600px");
} else {
    console.log("屏幕宽度大于600px");
}

2. 监听媒体查询变化

window.matchMedia() 方法返回的对象包含一个 addListener() 方法（在旧版浏览器中是 addListener，在新版浏览器中是 addEventListener），用于监听媒体查询的变化。

const mq = window.matchMedia("(max-width: 600px)");

mq.addListener((event) => {
    if (event.matches) {
        console.log("屏幕宽度小于等于600px");
        // 在这里执行相应的操作
    } else {
        console.log("屏幕宽度大于600px");
        // 在这里执行相应的操作
    }
});

3. 使用JavaScript动态更改样式

你可以使用JavaScript来动态更改元素的样式，从而实现响应式设计。例如，你可以根据媒体查询的结果来更改元素的类名。

const mq = window.matchMedia("(max-width: 600px)");

mq.addListener((event) => {
    const container = document.querySelector(".container");
    if (event.matches) {
        container.classList.add("small-screen");
        container.classList.remove("large-screen");
    } else {
        container.classList.add("large-screen");
        container.classList.remove("small-screen");
    }
});

4. 使用JavaScript触发CSS动画

你可以使用JavaScript来触发CSS动画，从而实现动态效果。例如，当用户点击某个按钮时，根据当前的屏幕尺寸应用不同的动画效果。

<button id="animateBtn">点击动画</button>

/* 默认动画 */
@keyframes defaultAnimation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

/* 小屏幕设备动画 */
@keyframes smallScreenAnimation {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100px);
    }
}

.animate {
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

const animateBtn = document.getElementById("animateBtn");
const mq = window.matchMedia("(max-width: 600px)");

animateBtn.addEventListener("click", () => {
    const container = document.querySelector(".container");
    if (mq.matches) {
        container.classList.add("animate", "smallScreenAnimation");
        container.classList.remove("defaultAnimation");
    } else {
        container.classList.add("animate", "defaultAnimation");
        container.classList.remove("smallScreenAnimation");
    }
});

通过这些方法，你可以实现CSS媒体查询和JavaScript之间的交互，从而创建更加动态和响应式的网页。