css - calc() 在媒体查询中不起作用

Question

@media screen and (max-width: calc(2000px-1px)) { 
  .col { width: 200px; }
}

减法后的值应该是 1999px，但它似乎不起作用。如果我手动将它更改为 1999px 它工作正常，所以我知道这不是我的 CSS 的问题。媒体查询不支持 calc，还是我做错了什么？

Answer 1

2022 年 3 月 21 日再次编辑答案:

在规范的当前版本中，the spec 不支持在媒体查询中使用 calc(或 var) (正如 TylerH 在下面指出的那样)。

Properties sometimes accept complex values, e.g., calculations that involve several other values. Media features* only accept single values: one keyword, one number, etc.

* 媒体功能包括 (max-width: ...) (或 (... < width < ...) )。

2012 年的旧规范也明确提到无计算。

OP 问题肯定会被打破，因为 calc 需要运算符之间的空格 calc(2000px - 1px) ，但即使使用空格，您也不应该期望或相信它能够可靠地工作。

支持 calc 的浏览器实际上并不遵循规范。

---

答案已于 2018 年 2 月 13 日编辑:

使用 calc规范支持媒体查询，但最近(2018 年 2 月)才由浏览器实现支持。目前，calc Safari Technology Preview 49+ 支持媒体查询, Chrome 66+ , 和 Firefox 59+ .参见 MDN's calc() page获取最新信息。