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

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

4

4 回答 4

43

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

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

于 2014-05-15T10:42:22.013 回答
12

是否支持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
于 2020-04-10T12:21:00.450 回答
8

Pinal 的回答很好，但你的 CSS 无论如何都行不通。您需要空间分隔您的单位。在 CSS2000px-1px中将被视为单个值，这显然不是一个有效的单位。应该是2000px - 1px。

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

于 2018-05-08T18:36:02.937 回答
0

在 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>
于 2020-10-22T06:54:58.470 回答