calc（）在媒体查询中不工作 [英] calc() not working within media queries

问题描述

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

减法后的值应为1999px，加工。如果我手动更改为1999px它工作正常，所以我知道这不是我的CSS的问题。

The value after subtraction should be 1999px, however it does not seem to be working. If I manually change it to 1999px it works fine, so I know it's not a problem with my css. Is calc not supported within media queries, or am I doing something wrong?

推荐答案

您在做错事。

规范不支持在媒体查询中使用 calc 。

媒体查询规范（W3C推荐）：

媒体功能

在语法上，媒体功能与CSS属性类似：名称为
， 。但是，属性和媒体功能之间存在一些重要的
差异：

Syntactically, media features resemble CSS properties: they have names and accept certain values. There are, however, several important differences between properties and media features:

属性用于声明以提供有关如何
的信息文件。在表达式中使用介质特性来描述输出设备的
要求。

Properties are used in declarations to give information about how to present a document. Media features are used in expressions to describe requirements of the output device.

...

属性可能
接受更复杂的值，例如计算涉及几个
其他值。媒体功能只接受单一值：一个关键字，
一个数字或带有单位标识符的数字。 （唯一的例外情况是
是aspect-ratio和device-aspect-ratio媒体功能。）

Properties may accept more complex values, e.g., calculations that involve several other values. Media features only accept single values: one keyword, one number, or a number with a unit identifier. (The only exceptions are the ‘aspect-ratio’ and ‘device-aspect-ratio’ media features.)

这篇关于calc（）在媒体查询中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！