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

Posted 2023-03-06

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

【英文标题】：How can I pass css variable to media queries in Javascript Object? [duplicate]

【发布时间】：2022-01-09 09:25:37

【问题描述】：

我想将 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)')"，但它不起作用。

你们能帮帮我吗？

【参考方案1】：

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

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

【讨论】：

谢谢！如果有人需要，我也在这里找到了答案***.com/questions/40722882/…