calc()在媒体查询中无法工作

Question

calc()在媒体查询中无法工作

60

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

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

- AndSmith

3

这里没有提到 calc，所以我猜它是不被允许的。 - Marc B

3

根据我的测试，calc 在媒体查询中似乎无法正常工作。很遗憾.. =[ - corysimmons

5个回答

14

支持在媒体查询中使用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-sums操作的其他函数（即执行一个或多个操作的函数）也可以在媒体查询中使用。这个JSFiddle演示了比较函数max()，min()和clamp()的实用性。目前，以下浏览器支持在媒体查询中使用这些函数：

Chrome 87
Edge 87
Firefox 82
Opera 72

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

Firefox 82

- CSSBurner

1

大多数人不会花很多时间研究/显示完整的统计数据。这是一篇很棒的文章。 - Jeff Clayton

这个似乎正在追踪的Chromium bug在这里：https://bugs.chromium.org/p/chromium/issues/detail?id=843584 - tremby

请注意，虽然某些浏览器支持函数，但规范不允许使用。我鼓励人们避免在媒体查询中使用这些函数，因为它们没有约定的处理边缘情况的方式。（即等到规范添加支持） - tbjgolden

8

Pinal的回答很好，但是你的CSS也无法工作。你需要在单位之间加上空格。在CSS中，2000px-1px将被视为单个值，显然不是有效的单位。应该是2000px - 1px。

我目前正在使用Chrome 66，calc在媒体查询中可以正常工作。

- Gavin

2

这个功能涉及到两个相关的规范：

媒体查询规范指定了一些条件（例如width）可以具有数字值。

从值规范中可以看出：

数学函数代表一个数字值，可以在任何需要此类值的地方使用。

这两者结合起来肯定要求浏览器实现媒体特性值中的calc()和其他内容。

MDN也跟踪了这一点：https://developer.mozilla.org/en-US/docs/Web/CSS/@media#browser_compatibility

今天所有浏览器都支持calc。

然而，一些子功能可能支持不佳。例如，aspect-ratio对calc()的支持存在混合情况，因为其基础类型不支持浮点值。这样的怪异现象可能会使人们认为calc()不稳定，即使其他问题是导致此现象的原因。

- R Menke

0

IE11（截至2020年10月）不支持使用calc（）的媒体查询。

<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>

- Ido Ayal

1

请问您能提供一个源吗？ - Lynxi

谢谢，我已经在原回答中添加了源代码。 - Ido Ayal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pinal · Accepted Answer

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

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

属性有时可以接受复杂的值，例如涉及多个其他值的计算。媒体特性*仅接受单个值：一个关键词、一个数字等。

* 媒体特性包括 (max-width: ...)（或 (... < width < ...)）。

旧的规范从2012年开始就明确提到了没有calc。

问题发布者的问题肯定会出错，因为计算需要运算符之间的空格calc(2000px - 1px)，但即使有空格，也不应该期望或相信它能可靠地工作。

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

2018年2月13日编辑答案:

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