Why Aren't My CSS Variables Working in Media Queries?

Problem: CSS Variables Not Functioning in Media Queries

When attempting to incorporate CSS variables into media queries, they remain ineffective. The following code serves as an example:

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

Explanation:

According to the CSS specification:

"The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values."

In other words, while variables can be incorporated into property values, they remain incompatible with media queries. This is due to the fact that media queries are not HTML elements and thus cannot inherit from the root element where variables are typically defined.

Alternatives:

To achieve similar functionality, developers can consider utilizing a CSS preprocessor. Preprocessors extend CSS by allowing custom code to be written, which can be used to create dynamic media queries based on variable values.

The above is the detailed content of Why Aren't My CSS Variables Working in Media Queries?. For more information, please follow other related articles on the PHP Chinese website!