媒体查询中使用CSS变量不生效项目中偶然发现使用css变量不生效，猜测媒体查询不能使用css变量。于是，写一些简单代码

项目中偶然发现使用css变量不生效，猜测媒体查询不能使用css变量。

    @media (max-width: var(--xl)) {}

于是，写一些简单代码来测试：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 变量在媒体查询中的使用</title>
    <style>
        :root {
            --sm: 576px;
        }

        .box {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
            margin-top: 20px;
        }

        @media (max-width: var(--sm)) {
            .box {
                background-color: lightyellow;
            }
        }
    </style>
</head>

<body>
    <div class="box">这是一个盒子</div>
</body>

</html>

大屏幕下：

缩小屏幕，颜色没变化，媒体查询不生效：

在测试期间，询问了AI。AI一直强调是可以的[捂脸]，后面一点点引导AI提供具体的代码，一步步去测试，果然验证出结果！ CSS 变量不能直接在媒体查询中使用。这是因为媒体查询是在 CSS 解析的早期阶段进行评估的，而 CSS 变量是在稍后的阶段解析的。