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

Question

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

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

Answer 1

ANSWER已被编辑13.02.2018:

calc规范支持在媒体查询中使用,但最近(2018年2月)仅由浏览器实现了支持.目前,Safari Technology Preview 49 +,Chrome 66+和Firefox 59+calc支持媒体查询.有关最新信息,请参阅MDN的页面.calc()

Answer 2

calc()在媒体查询中使用 的支持取决于浏览器，但是混合单位（例如同时使用 em 和 px）的使用有限或没有当前支持。请查看此 JSFiddle（测试 4 个当前浏览器 - Chrome 80.0.3987.163、Opera 67.0.3575.115、Firefox 74.0.1 和 Microsoft Edge 44.18362.449.0）进行验证。

例如，这些媒体查询对某些浏览器有效（Chrome 80.0.3987.163、Opera 67.0.3575.115 和 Firefox 74.0.1，但不适用于 Microsoft Edge 44.18362.449.0）

@media (min-width:calc(2em - 1em)) { div { color: green } } // valid

@media (min-width:calc(2px - 1px)) { div { color: green } } // valid

而此媒体查询仅在 Firefox 74.0.1 中有效

@media (min-width:calc(1em - 1px)) { div { color: green } } // different units are "mixed" in same calc() -----> invalid except Firefox

2020 年 12 月更新：函数calc()系列中的其他函数（即对一个或多个calc-sums执行操作的函数）也可以在媒体查询中使用。这的jsfiddle证明的效用比较函数max()，min()和clamp()。目前浏览器在媒体查询中支持这些功能：

1. 铬 87
2. 边缘 87
3. 火狐 82
4. 歌剧72

但是，只有以下浏览器（来自上面的列表）支持在每个比较函数中使用混合单位：

1. 火狐 82

Answer 3

Pinal的答案很棒,但你的CSS无论如何都行不通.你需要空间来分隔你的单位.在CSS中,2000px-1px将被视为单个值,这显然不是有效单位.它应该是2000px - 1px.

我目前正在使用Chrome 66,并且calc在媒体查询中运行良好.