如何将 css 变量传递给 Javascript 对象中的媒体查询？ [复制]

Question

我想将 css 变量传递给我的媒体查询，但我不知道如何。

这是一个 Next.Js 项目，我使用theme-ui 的sx 属性来分配样式。

const styles = {

    headerLinkContainer: {
        width: '500px',
        justifyContent: 'space-evenly',
        alignItems: 'center',
        "@media screen and (min-width: var(--medium-devices))": {
            display: 'none',
        }
    },
}

我尝试了"@media screen and (min-width: 'var(--medium-devices)')"，但它不起作用。

你们能帮帮我吗？

Answer 1

您不能在 js 中使用媒体查询。 最好的解决方案是：

if (window.matchMedia("(min-width: 600px)").matches) {
}