@media screen and (max-width: calc(2000px-1px)) {
.col { width: 200px; }
}
减法后的值应该是1999px，但它似乎不起作用。如果我手动将其更改为 1999px 它工作正常，所以我知道这不是我的 CSS 的问题。媒体查询不支持calc，还是我做错了什么？
【问题讨论】：
calc 在我的测试中似乎不适用于媒体查询。糟透了.. =[
标签： css media-queries css-calc
答案已于 2018 年 2 月 13 日编辑：
规范支持在媒体查询中使用calc，但最近（2018 年 2 月）浏览器才支持。目前，Safari Technology Preview 49+、Chrome 66+ 和Firefox 59+ 支持媒体查询中的calc。有关最新信息，请参阅 MDN's calc() page。
【讨论】：
是否支持在媒体查询中使用 calc() 取决于浏览器，但是混合单位（例如同时使用 em 和 px）的支持有限或目前没有支持。请查看this 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 演示了comparison functions max(), min(), and clamp() 的实用性。浏览器当前在媒体查询中支持这些功能：
但是，只有以下浏览器（来自上面的列表）支持在每个比较函数中使用混合单位：
【讨论】：
Pinal 的回答很好，但你的 CSS 无论如何都不起作用。您需要空间分隔您的单位。在 CSS 中，2000px-1px 将被视为单个值，这显然不是有效单位。应该是2000px - 1px。
我目前使用的是 Chrome 66，并且 calc 在媒体查询中运行良好。
【讨论】：
IE11 中不支持使用 calc() 进行媒体查询（截至 2020 年 10 月）。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Media query</title>
<style>
body {
background-color: powderblue;
}
@media screen and (min-width: calc(700px + 1px)) {
body {
background-color: yellow;
}
}
</style>
</head>
<body>
</body>
</html>
【讨论】：