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

【问题标题】：CSS variables in media queries on Chrome? [duplicate]Chrome上媒体查询中的CSS变量？ [复制]
【发布时间】：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 中，它按预期工作。

【问题讨论】：

标签： html css google-chrome safari

【解决方案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;
  }
}

&lt;div class="sidebar"&gt;sidebar&lt;/div&gt;

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

【讨论】：

【解决方案2】：

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

【讨论】：