问题标签 [matchmedia]

嗨，我是js新手。我想通过 JS (window.matchMedia) 将我的 scrollTOp 方法链接到媒体查询。

我不知道怎么做，请帮忙:)

我的 App 组件中有以下代码。

当我从浅色模式开始，然后进入系统设置并打开深色模式时，会加载深色 css，但是当我关闭深色模式时 css 不会更新。当我以暗模式开始时，相反的事情也会发生。

您可以看到我正在记录 isDarkMode 的值，并且每次打开/关闭暗模式时都会更新。谁能解释为什么CSS只是第一次改变？有没有更好的方法来处理 css 的更新？

我想知道用户使用/不使用反转颜色模式（wcag）（视障人士的标准 windows/mac 功能）......此模式处于活动状态或非活动状态。可能吗？

我正在尝试window.matchMedia('(-ms-high-contrast: active)')用于 Windows 或window.matchMedia('(inverted-colors)')Mac，但它不起作用。

有没有使用 JS/jQuery 的可行解决方案？

我需要在以下代码中添加 matchMedia 查询，以便它仅在 1366px 的视口宽度处激活，我尝试了一些不同的选项，但没有任何效果。

我将不胜感激任何帮助。

谢谢马克

Im trying to toggle a click event listener using matchmedia. My goal is to add the eventlistener when the screen size is less than or equal 768px and removeEventListener above 768px. The event listener is removed and added when I write them as seperate functions like below:

HOWEVER, when I write it as a class function below (which is what I need, so that i can remove the myFunction listener later on), the click eventListener gets added, but does not get removed. The console.log of 'smaller screen' and 'wider screen' changes with the width successfully, so i'm thinking it must be something to do with the way I've set up the class function, constructor and/or the methods.

Sorry for the noob question - I've been at it for ages! This is my first time posting so any help/guidance is greatly appreciated.

我window.matchMedia用来检测屏幕尺寸。我想在页面进入小屏幕时重新加载页面。但是，我的代码导致无限渲染。我怎样才能解决这个问题？

我想执行一个监听器函数（添加类，“光标白色”），只有在满足以下两个条件时才会发生。

1. $(window).scrollTop 为 0（在窗口顶部）
2. 并且窗口 <= 900px。

我正在努力使逻辑正确。我已将 mql 放在区间滚动函数中。它在满足 2 个条件时执行（并添加了类），这很好，但是当我从大于 900px 变为小于 900px 宽时，即使滚动位置不在窗口顶部，它也会执行。

这显然不是我们想要的结果。如何确保仅在满足这两个条件时才添加课程。任何帮助是极大的赞赏 ：）

我正在尝试使用 window.matchMedia 事件侦听器来检测用户是否在触摸设备上。但我似乎只是在调整 chrome DevTools 窗口大小时才激活，而不是实际检测它是否是触摸设备（例如，在我的像素 3a 上）。

这是我用于事件监听器的代码

以及它运行的功能

}

我正在尝试使用该window.matchmedia();方法在不同的断点触发不同的 GSAP 时间线。

我试图在这里整理一个简单的例子来解释我的想法：

这个想法是让change按钮在每个断点内触发动画。但这种方法行不通。这有可能实现吗？

这里还有一个 Codepen：  https ://codepen.io/abbasarezoo/pen/94c0b1c73f770d36f1103f615ac3e917

下面是我正在学习的其中一个教程中使用的代码片段。有人可以帮助了解如何将参数“mediastate”传递给“notify”函数中的变量“transientListen”吗？