Menu
@media screen and (max-width: calc(2000px-1px)) { .col { width: 200px; } } 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?
693
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.
The calc() function takes a single expression as its parameter, with the expression's result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rules: + Addition.
This is also how you can create aspect-ratio locked divs in HTML since you can calculate height from width using padding-top with a percentage value. A solution for you would be to use CSS calc, it has good browser support and fixes your issue in quite a simple manner.
CSS calc() It is an inbuilt CSS function which allows us to perform calculations. It can be used to calculate length, percentage, time, number, integer frequency, or angle. It uses the four simple arithmetic operators add (+), multiply (*), subtract (-), and divide (/).
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.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
