Chrome上媒体查询中的CSS变量？ [复制]

Posted 2023-03-06

【中文标题】Chrome上媒体查询中的CSS变量？ [复制]

【英文标题】：CSS variables in media queries on Chrome? [duplicate]

【发布时间】：2016-09-19 01:05:49

【问题描述】：

Chrome 不支持媒体查询中的 CSS 变量吗？

我有以下 CSS：

:root 
 --threshold-lg: 1200px;
 --threshold-md: 992px;
 --threshold-sm: 768px;
 --sidebar-margins: 10px;


@media(min-width: var(--threshold-sm)) 
  .sidebar 
    top: var(--sidebar-margins);
    bottom: var(--sidebar-margins);
  

在 Chrome 50 和 Chrome Canary (52) 中，我看不到边距调整。在 Safari 9.1 中，它按预期工作。

【参考方案1】：

:root 
 --threshold-lg: 1200px;
 --threshold-md: 992px;
 --threshold-sm: 768px;
 --sidebar-margins: 10px;


body 
  background-color: pink;

@media(min-width: 300px) 
  .sidebar 
    position: absolute;
    top: var(--sidebar-margins);
    bottom: var(--sidebar-margins);
    background-color: tan;
  

<div class="sidebar">sidebar</div>

根据这个测试，似乎只有媒体查询条件有问题。

【参考方案2】：

遗憾的是 CSS 变量不能用于 @media 查询。有关更多详细信息，请参阅问题 here 的最佳答案。 （如果我知道如何访问并且可以访问，我会将这两个问题标记为重复问题！）