如何将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) {
}