title: Font scaling based on width of container
body: <p>I'm having a hard time getting my head around font scaling.</p>
  
  <p>I currently have a website with a body <code>font-size</code> of 100%. 100% of what though? This seems to compute out at 16 pixels.</p>
  
  <p>I was under the impression that 100% would somehow refer to the size of the browser window, but apparently not because it's always 16 pixels whether the window is resized down to a mobile width or full-blown widescreen desktop.</p>
  
  <p>How can I make the text on my site scale in relation to its container? I tried using <code>em</code>, but this doesn't scale either.</p>
  
  <p>My reasoning is that things like my menu become squished when you resize, so I need to reduce the <code>px</code> <code>font-size</code> of <code>.menuItem</code> among other elements in relation to the width of the container. (For example, in the menu on a large desktop, <code>22px</code> works perfectly. Move down to tablet width and <code>16px</code> is more appropriate.)</p>
  
  <p>I'm aware I can add breakpoints, but I really want the text to scale as <em>well</em> as having extra breakpoints, otherwise, I'll end up with hundreds of breakpoints for every 100pixels decrease in width to control the text.</p>