@media screen and (max-width: calc(2000px-1px)) { .col { width: 200px; } }
减法后的值应该是1999px，但是它似乎不起作用。如果我手动将其更改为1999px，它工作正常，所以我知道这不是CSS的问题。是媒体查询不支持calc，还是我做错了什么？
1999px
calc
z9smfwbn1#
答案于2022年3月21日再次编辑：
在当前版本的规范中，规范不支持在媒体查询中使用calc（或var）（正如TylerH在下面指出的）。属性有时接受复杂值，例如涉及多个其他值的计算。媒体功能*仅接受单个值：一个关键字、一个号码等。
(max-width: ...)
(... < width < ...)
2012年的旧规范也明确提到无计算。OP问题肯定会被打破，因为calc在运算符calc(2000px - 1px)之间需要空格，但即使有空格，也不应该期望或相信它能可靠地工作。支持calc的浏览器实际上并没有遵循规范。
calc(2000px - 1px)
答复已于2018年2月13日编辑：
该规范支持在媒体查询中使用calc，但最近（2018年2月）才在浏览器中实现。目前，Safari Technology Preview 49+、Chrome 66+和Firefox 59+支持在媒体查询中使用calc。有关最新信息，请参阅MDN's calc() page。
calc()
hi3rlvi22#
支持在媒体查询中使用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()函数家族中的其他函数（即对一个或多个计算和执行运算的函数）也可以在媒体查询中使用。此JSFiddle演示了比较函数max()、min()和clamp()的实用性。浏览器当前在媒体查询中支持这些函数：
max()
min()
clamp()
2hh7jdfx3#
Pinal的答案很好，但是你的CSS无论如何都不能工作。你需要空格来分隔你的单元。在CSS中2000px-1px会被认为是一个单一的值，这显然不是一个有效的单元。它应该是2000px - 1px。我目前使用的是Chrome66，calc在媒体查询中运行良好。
2000px-1px
2000px - 1px
ua4mk5z44#
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>
643ylb085#
有两个规范与此功能相关：
介质查询规范规定某些条件（例如width）可以具有数字值。根据值规范：数学函数表示一个数值，并且可以在此类值有效的任何情况下使用。这两个结合起来肯定会要求浏览器在媒体特征值中实现calc()等。这也由MDN跟踪：https://developer.mozilla.org/en-US/docs/Web/CSS/@media#browser_compatibility
width
现在所有的浏览器都支持calc。
aspect-ratio
5条答案
按热度按时间z9smfwbn1#
答案于2022年3月21日再次编辑：
在当前版本的规范中，规范不支持在媒体查询中使用calc（或var）（正如TylerH在下面指出的）。
属性有时接受复杂值，例如涉及多个其他值的计算。媒体功能*仅接受单个值：一个关键字、一个号码等。
(max-width: ...)（或(... < width < ...)）。2012年的旧规范也明确提到无计算。
OP问题肯定会被打破，因为calc在运算符
calc(2000px - 1px)之间需要空格，但即使有空格，也不应该期望或相信它能可靠地工作。支持calc的浏览器实际上并没有遵循规范。
答复已于2018年2月13日编辑：
该规范支持在媒体查询中使用
calc，但最近（2018年2月）才在浏览器中实现。目前，Safari Technology Preview 49+、Chrome 66+和Firefox 59+支持在媒体查询中使用calc。有关最新信息，请参阅MDN'scalc()page。hi3rlvi22#
支持在媒体查询中使用
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）
而此媒体查询仅在Firefox 74.0.1中有效
2020年12月更新：
calc()函数家族中的其他函数（即对一个或多个计算和执行运算的函数）也可以在媒体查询中使用。此JSFiddle演示了比较函数max()、min()和clamp()的实用性。浏览器当前在媒体查询中支持这些函数：1.边缘87
1.火狐82
1.歌剧72
但是，只有以下浏览器（来自上面的列表）支持在每个比较函数中使用混合单位：
1.火狐82
2hh7jdfx3#
Pinal的答案很好，但是你的CSS无论如何都不能工作。你需要空格来分隔你的单元。在CSS中
2000px-1px会被认为是一个单一的值，这显然不是一个有效的单元。它应该是2000px - 1px。我目前使用的是Chrome66，calc在媒体查询中运行良好。
ua4mk5z44#
IE11中不支持使用calc（）进行媒体查询（截至2020年10月）。
643ylb085#
有两个规范与此功能相关：
介质查询规范规定某些条件（例如
width）可以具有数字值。根据值规范：
数学函数表示一个数值，并且可以在此类值有效的任何情况下使用。
这两个结合起来肯定会要求浏览器在媒体特征值中实现
calc()等。这也由MDN跟踪：https://developer.mozilla.org/en-US/docs/Web/CSS/@media#browser_compatibility
现在所有的浏览器都支持
calc。aspect-ratio混合支持calc()，因为它的底层类型不支持浮点值。像这样的奇怪情况可能会让calc()看起来很不可靠，即使其他东西导致了问题。*