1
@media screen and (max-width: env(--width-max)) {
  .foo {
    font-size: var(--fonts-size);
  }
}

:root {
  --width-max: 0;
  --fonts-size: 1rem;
}

As I understand it, the above code should set a media query on the .foo element, however it is not being picked up by the browser. I saw the postcss-media-variables library, but would prefer to use env, but cannot figure out what I am doing wrong. How can I access CSS env variables in a media query?

TylerH
  • 20,799
  • 66
  • 75
  • 101
brewster
  • 4,342
  • 6
  • 45
  • 67
  • I don't believe variables are supported in media queries at this time. – TylerH Sep 15 '21 at 18:14
  • This has been answered here: https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries – Nathaniel Flick Sep 15 '21 at 18:26
  • @NathanielFlick That answer only says to use `env()` but not how. @brewster is already trying to use `env()` but it's not working. The real question is how do you SET an `env()` variable, which I cannot find explained anywhere either. – Kenmore Jan 21 '22 at 00:30

0 Answers0