title: How to use EMs in CSS Media Queries aligned with JavaScript events?
body: <p>I have been working on a project for a while and I thought that using <strong>em</strong> was the <em>de facto</em> unit when it came to expressing length.</p>
  
  <p>The way I usually proceed is to set the <em>body</em> and <em>html</em> elements to the desired <strong>px</strong> size and all the other elements to 1em. After that the rest is all in <strong>em</strong>. Until this morning this seemed like a good plan, until I found out that <em>media queries</em> don't seem to take in account the base <em>body</em> and <em>html</em> px value. They seem in fact to take the browser's default font-size which seems to be a very odd behavior. I also found <a href="https://zellwk.com/blog/media-query-units/" rel="nofollow">this article</a> which seems to confirm this.</p>
  
  <p>I have done a small JsFiddle example which shows exactly this behavior:</p>
  
  <p><a href="https://jsfiddle.net/5dq3kq2t/2/" rel="nofollow">https://jsfiddle.net/5dq3kq2t/2/</a></p>
  
  <pre><code>html, body {
      font-size: 20px;
  }
  
  * {
    font-size: 1em;
  }
  
  #divOf50Em {
    width: 50em;
    border: solid 1px red;
  }
  
  #cell2 {
    display: none;
  }
  
  @media screen and (min-width: 50em) { /* 1000px, in theory (50 * 20px) */
    #cell1 {
      display: none;
    }
  
    #cell2 {
      display: table-cell;
    }
  
  }
  </code></pre>
  
  <p>The experiment is simple, the table by default show the value "<strong>1</strong>" until the <strong>50em</strong> <em>min-width</em> media size has been met. the the value "<strong>2</strong>" should display. I also placed a <em>div</em> which size is <strong>50em</strong> to show when the behavior should be triggered and also to confirm that the CSS works outside of media queries.</p>
  
  <p>If you resize the output of this experiment, you would expect that the shift between the two values would happen at a <strong>1000px</strong> value which is <strong>50em</strong> * <strong>20px</strong>, but it does not, it happens at <strong>800px</strong> which is <strong>50em</strong> * <strong>16px</strong> (the default browsers font-size - if this is your default size of course).</p>
  
  <p>I'm clearly unsure of why this happens but I have two questions:</p>
  
  <ol>
  <li>Is there a way around this (e.g. overwrite default browser font-size
  from a CSS perspective)</li>
  <li>If not, is there a way in JavaScript to access the browser's default
  font size? I was unable to find this information.</li>
  </ol>
  
  <p>Otherwise it looks like having a script which would be aligned with media queries for some behaviors is impossible when using media width and <strong>em</strong>s since we cannot rely that the browser's font size will always be <strong>16px</strong>.</p>
  
  <p>Then if this is the case, my last question would be, is there a way to align media queries and JavaScript without going back to pixels? I prefer relative units over static pixels, they usually make styling much simpler.</p>