ANSWER EDITED AGAIN 21.03.2022:
In the current version of the spec, using calc (or var) in media queries is NOT supported by the spec (as TylerH pointed out below).
Properties sometimes accept complex values, e.g., calculations that involve several other values. Media features* only accept single values: one keyword, one number, etc.
* Media features include (max-width: ...)
(or (... < width < ...)
).
Old specs back to 2012 also explicitly mention no calc.
The OP question would definitely have been broken because calc needs whitespace between operators calc(2000px - 1px)
, but even with whitespace you shouldn’t expect or trust it to work reliably.
Browsers that support calc are not actually following the spec.
ANSWER WAS EDITED 13.02.2018:
Using calc
in media queries is supported by the spec, but support was only implemented by browsers recently (February 2018). Currently, calc
in media queries is supported by Safari Technology Preview 49+, Chrome 66+, and Firefox 59+. See MDN’s calc()
page for the most up-to-date information.