title: Setting the fontSize of <html> in React for using REM in responsive design
body: <p>I'm currently working on a pet web project with react and I'm using a container that's 16:9 and scaling with the current viewport. The idea is based on a pen, I've created with vanilla JS (<a href="https://codepen.io/AllBitsEqual/pen/PgMrgm" rel="nofollow noreferrer">https://codepen.io/AllBitsEqual/pen/PgMrgm</a>) and that's already working like a charm.</p>
  
  <pre><code>function adjustScreen() {...}
  adjustScreen()
  
  [...]
  
  const resizeHandler = function () { adjustScreen() }
  
  window.addEventListener('resize', helpers.debounce(resizeHandler, 250, this))
  </code></pre>
  
  <p>I've now written a script that's sitting in my App.jsx, (un)binds itself via useEffect and calculates the current size of the viewport to adjust the container, whenever the viewport changes (throttled for performance). I'm also using media queries to adjust the size and font size of elements in the container, which is working ok but isn't much fun to work with.</p>
  
  <p>I want to expand on this idea and change the font size of the HTML Element in the same function that calculated the current container size so that I can use REM to scale font-size and other elements based on my calculated root font size.</p>
  
  <p>Is there a valid and future-proofed way of changing the font-size style of my  Tag via ReactJS either via the style tag or style attribute?</p>