calc() not working within media queries

by

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.

More Related Contents:

  1. How to prevent Less from trying to compile CSS calc() properties?
  2. Can media queries resize based on a div element instead of the screen?
  3. Why does the order of media queries matter in CSS?
  4. What is the difference between “screen” and “only screen” in media queries?
  5. Twitter Bootstrap 3: how to use media queries?
  6. CSS media queries: max-width OR max-height
  7. Disable LESS-CSS Overwriting calc() [duplicate]
  8. Media query to detect if device is touchscreen
  9. Sass Variable in CSS calc() function
  10. Common CSS Media Queries Break Points [duplicate]
  11. CSS media query to target only iOS devices [duplicate]
  12. What does @media screen and (max-width: 1024px) mean in CSS?
  13. CSS native variables not working in media queries
  14. CSS Calc alternative
  15. Extending selectors from within media queries with Sass
  16. Responsive css styles on mobile devices ONLY
  17. Media query not working in IE9
  18. Which are the most important media queries to use in creating mobile responsive design?
  19. CSS media queries min-width and min-device-width conflicting?
  20. IE7, IE8 support for css3 media query [duplicate]
  21. Why doesn’t min() (or max()) work with unitless 0?
  22. Max-Width vs. Min-Width
  23. How to make responsive table [closed]
  24. iPhone X / 8 / 8 Plus CSS media queries
  25. How can I avoid media query overlap?
  26. Single vs multiple stylesheets in responsive web design
  27. @import styles not working in a media query
  28. Using modulus in css calc function
  29. Media queries and background images
  30. @media query not working in mobile. Works fine in Chrome

Leave a Comment