calc() 在媒体查询中不起作用
Posted
技术标签:
【中文标题】calc() 在媒体查询中不起作用【英文标题】：calc() not working within media queries 【发布时间】：2014-07-03 05:59:29 【问题描述】：@media screen and (max-width: calc(2000px-1px))
.col width: 200px;
减法后的值应该是1999px，但它似乎不起作用。如果我手动将其更改为 1999px 它工作正常，所以我知道这不是我的 CSS 的问题。媒体查询不支持calc，还是我做错了什么？
【问题讨论】：
in here 的任何地方都没有提到 calc，所以我猜这是不允许的。calc 在我的测试中似乎不适用于媒体查询。糟透了.. =[
【参考方案1】：
答案已于 2018 年 2 月 13 日编辑：
规范支持在媒体查询中使用calc，但最近（2018 年 2 月）浏览器才支持。目前，Safari Technology Preview 49+、Chrome 66+ 和Firefox 59+ 支持媒体查询中的calc。有关最新信息，请参阅 MDN's calc() page。
【讨论】：
根据 Chrome 上的这个问题， calc 应该在媒体查询中工作，但它没有实现：bugs.chromium.org/p/chromium/issues/detail?id=421909 @OliverJosephAsh 此错误是作为 MQ L3 或 L4（媒体查询级别 4）草案的一部分提出的。这是草稿，明天可以删除。不确定 calc 是否会很快实施。现在所有现代浏览器都只支持 MQ L1 实现。 媒体查询中允许使用计算，但不支持根据规范使用媒体功能的函数（包括计算）。 w3.org/TR/mediaqueries-4/#mq-features MDN 页面没有关于媒体查询的nothing。我不确定为什么这个答案如此受欢迎。【参考方案2】：是否支持在媒体查询中使用 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() 的实用性。浏览器当前在媒体查询中支持这些功能：
-
铬 87
边缘 87
火狐82
歌剧 72
但是，只有以下浏览器（来自上面的列表）支持在每个比较函数中使用混合单位：
-
火狐82
【讨论】：
大多数人不会花很多时间研究/显示完整的统计数据。这是一篇很棒的文章。 似乎正在跟踪此问题的 Chromium 错误在这里：bugs.chromium.org/p/chromium/issues/detail?id=843584【参考方案3】：Pinal 的回答很好，但你的 CSS 无论如何都不起作用。您需要空间分隔您的单位。在 CSS 中，2000px-1px 将被视为单个值，这显然不是有效单位。应该是2000px - 1px。
我目前使用的是 Chrome 66，并且 calc 在媒体查询中运行良好。
【讨论】：
【参考方案4】：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>
【讨论】：
能否提供出处？ 谢谢，我在原始答案中添加了来源。以上是关于calc() 在媒体查询中不起作用的主要内容，如果未能解决你的问题，请参考以下文章