title: How do responsive images work with `em` supplied as a length in `sizes`?
body: <p>How can browsers understand the <code>em</code> unit when used in a responsive image?</p>
  
  <pre><code>&lt;img alt="A giraffe" src="giraffe.jpg"
       srcset="giraffe@1.5x.jpg 600w, giraffe@2x.jpg 800w, [etc.]"
       sizes="(max-width: 40em) 40em"&gt;
  </code></pre>
  
  <p>This validates, and I'm not seeing warnings in browser consoles. But if the whole point of the image preloader is to fetch images <em>before</em> the CSS is downloaded and parsed, what does the browser use for <code>em</code>?</p>
  
  <p>Is it just its default <code>font-size</code> that it applies to <code>&lt;html&gt;</code>? Should I use <code>rem</code> for clarity? Is there a difference between the two when the user zooms?</p>
  
  <p>This isn't theoretical; I'm <a href="http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/" rel="noreferrer">using <code>em</code> in my media query breakpoints</a>, and some images are constrained by a container sized for optimal line length (<a href="http://maxdesign.com.au/articles/em/" rel="noreferrer">using <code>em</code></a>, of course).</p>
  
  <p>I checked the spec, but it's remarkably terse on the new responsive image features.</p>