问题描述
@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()在媒体查询中不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!