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's calc() page。

Answer 2

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

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

Answer 3

在媒体查询中使用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

Answer 4

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

calc（）在媒体查询中不起作用

4 个答案: