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?

Improve this question
3
  • I don't believe variables are supported in media queries at this time. Commented Sep 15, 2021 at 18:14
  • This has been answered here: stackoverflow.com/questions/40722882/… Commented Sep 15, 2021 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. Commented Jan 21, 2022 at 0:30
Related questions
3454
How can I access environment variables in Python?
3007
How can I transition height: 0; to height: auto; using CSS?
2551
How do I reduce the opacity of an element's background using CSS?
Load 5 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.