CSS native variables not working in media queries

Question

I am trying to use CSS variables in media query and it does not work.

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

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


        

Answer 1

As you can read other answers, still not possible to do so.

Someone mentioned custom environmental variables (similar to custom css variables env() instead of var()), and the principle is sound, though there are still 2 major issues:

• weak browser support
• so far there is no way to define them (but probably will be in the future, as this is so far only an unofficial draft)