title: Adjusting page layout upon a change in browser default font size?
body: <p>I've been struggling with a layout that automatically(without JS) adjusts when the user alters the browser's default font size.  Even in extension APIs there is not an event indicating that the user changed the default font size.</p>
  
  <p>To get around this, upon blur of the window, the width of an off-screen element is recorded and, upon focus, the size of the element is compared to the size recorded.  If there is a change, then the layout functions are run again.  This generated the desired layout, but there was a remaining issue of it taking time for the browser to recognize that there was a change. By this, I mean the code was fine but, unless a <code>setTimeout</code> of 500ms was used to delay the running of the code that queried the elements' geometry, the layout would be incorrect. An <code>offsetHeight</code> queried upon focus would differ from that queried 500ms later.</p>
  
  <p>I thought perhaps it was because I was doing all of this in JS and ought to have the browser perform it.  Thus, I started learning about <code>calc</code> in CSS and using it in media queries, which led me to this <a href="https://stackoverflow.com/questions/42903778/media-queries-in-em-not-affected-by-the-base-font-size">question</a> concerning the determination of <code>rem</code> in a media query.  The issue mentioned appeared to be that the browser always uses 16px to determine <code>rem</code> rather than the adjustment placed in the root or html element for font size such as the common 62.5%. I thought I could get around the issue by using <code>calc</code> within the media query.</p>
  
  <p>I tried the following in testing on my larger screen that is 1920px wide; and if use 191.9rem, the styles in the media query get applied, and do not for 192.0rem.  So, it seems accurate to the pixel.</p>
  
  <p><code>@media ( width &gt; calc( 192.0rem * 0.625 ) )</code></p>
  
  <p>However, when the browser's default font size is changed, it doesn't adjust as expected.  For example, since the screen is 1920px wide, at a base font of 16px, the media query style should not be applied.  But, if reduce the base font to less than 16px, the media-query styles should be applied because a <code>rem</code> is less than 10px, including the 62.5% adjustment, but they are not.  </p>
  
  <p>But, if leave the base font at less than 16px and then refresh the screen, the media-query styles are applied as they should be.  Thus, it appears that the issue of a necessary delay for the browser to reflect the new geometry still applies. The browser isn't always using 16px but the media query processes before the geometry is fully updated, which is the same problem I had before using JS and why the 500ms delay was needed. </p>
  
  <p>I attempted to illustrate this through the snippet but I don't know what width it will be displayed at in your browser so, it may not work properly for everyone. Plus, the snippet container doesn't appear to change with the default font size either. Nonetheless, the idea is there.  The <code>div.affected</code> should change color from yellow to blue when the browser default font size is decreased to below 16px; but it won't upon change but only after reloading the page.  </p>
  
  <p>The snippet works for me.  At default font size of 16px both boxes are blue.  Change default font size to 10px and immediately come back to this page and both boxes will still be blue.  Refresh the page and run the snippet again and the div.affected will be yellow. The converse works also.  I want div.affected to change when the font-size is changed. I added the text so you can see that it isn't because the snippet itself isn't responding to changes in font size by observing the size of the 'A'. </p>
  
  <p>Since the text size updated upon change of font size and without reload, perhaps this is part of a better answer, that is, instead of querying the size of an off-screen proxy element upon focus, query the font size of text. Maybe the 500ms can be reduced to zero for determining whether a change has taken place and, if so, then wait 500ms before querying to reset the layout.  I'll test that out, if don't receive a better idea shortly.  Tried it and it still requires a delay if use <code>getComputedStyle</code> to query font size.</p>
  
  <p>My question is, is there a way to do this better and get around the delay, either in JS or CSS and media queries with or without use of calc? </p>
  
  <p>I have it working in JS with a delay, but the the page has to be displayed but not visible and then wait 500ms before performing the calculation and making the page visible again.  I'm looking for a way that doesn't require a delay because CSS media queries appear to have the same issue and unless use JS to add a class after a delay, media queries won't work at all.</p>
  
  <p>Thank you for considering my rather confusing question.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div { width: 100px; height: 100px; background-color: rgb(73,110,147); margin: 10px;text-align: center; }
  
  div.unaffected { font-size: 48px; }
  
  div.affected { font-size: 3.0rem }
  
  @media ( width &gt; calc( 79.5rem* 0.625 ) ) { div.affected { background-color: yellow; } }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="unaffected"&gt;U&lt;/div&gt;
  &lt;div class="affected"&gt;A&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>