title: Using media query in CSS to alter variables that change the dimensioning of the content?
body: <p>I'm building this web app that's supposed to scale things to a precise size according to certain specifications.
  My approach to this was to create an equation that takes such specifications into consideration the use it inside a css calc() anywhere where dimensions are declared.
  So, instead of having say</p>
  <p>width: 100px;
  i'd have
  width: calc(100px * var(--XY));</p>
  <p>Where XY is calculated beforehand.</p>
  <p>Here's an example to better explain without showing the actual code (I can't)</p>
  <pre><code>:root{
      --X: 2;
      --Y: var(--X);
      }
  
  
  @media screen and (min-width:500px){ 
      :root{
          --Y: 1.0;
      }
  } 
  
  html{
      --XY: calc( (var(--X) / (var(--Y))));
  }
  
  
  body{
      width: calc(1280px * var(--XY));
  </code></pre>
  <p>The idea is that if its displayed on the base display, the @media won't alter the initial values of the variables and --XY will equal 1.</p>
  <p>The math is solid, I've tested with values inputted manually and the output changes accordingly.
  The @media is also working because I can see the variables getting changed in the browsers developer tools tab.
  However, the output doesn't change when the media query triggers.</p>
  <p>In this example, the media query would only trigger if the screen is wider than 500px, otherwise the variables would stay the same.</p>
  <p>It seems to me that the page is getting drawn after the calc() are run through but before the media query is checked somehow?
  Also what I don't get is that if I for example botch 'width: calc(1280px * var(--XY));' on purpose by replacing --XY with a variable that doesn't exist (say --ZZZ), the page is still drawn as if XY = 1.</p>
  <p>What's the run order of html and css? where is the render itself done?
  What am I missing here? I have a feeling it must be something elemental that I don't know about.</p>
  <p>Any ideas?
  Or any tips on how to troubleshoot it?</p>
  <p>Also: I'm new here, I tried searching for similar questions but came empty handed - could be that I'm searching for the wrong terms. I tried describing the problem as best as I can, but please forgive any mistakes or lacking information.</p>
  <p>Thanks in advance!</p>