How do responsive images work with `em` supplied as a length in `sizes`?

问题

How can browsers understand the em unit when used in a responsive image?

<img alt="A giraffe" src="giraffe.jpg"
     srcset="giraffe@1.5x.jpg 600w, giraffe@2x.jpg 800w, [etc.]"
     sizes="(max-width: 40em) 40em">

This validates, and I'm not seeing warnings in browser consoles. But if the whole point of the image preloader is to fetch images before the CSS is downloaded and parsed, what does the browser use for em?

Is it just its default font-size that it applies to <html>? Should I use rem for clarity? Is there a difference between the two when the user zooms?

This isn't theoretical; I'm using em in my media query breakpoints, and some images are constrained by a container sized for optimal line length (using em, of course).

I checked the spec, but it's remarkably terse on the new responsive image features.

回答1:

I bent the ears of the guys inside the official W3C #respimg chatroom, and this is what they had to say:

<Tigt> Pardon me folks, I had a question about how em is interpreted when used inside sizes
<TabAtkins> Tigt: Same as in Media Queries - they're relative to the initial font size.
<TabAtkins> (Not the font size on <html>, the initial font size, as set by the user's personal settings.)

<Wilto> 16px almost everywhere, so long as you haven’t changed the font-size of html.
<TabAtkins> Tigt: rem is treated identical to em here.

So the speed-read is:

When used in sizes or media queries, em and rem are both specced to mean "the user's default font-size.
The actual em or rem that controls how the image is laid out on the page can end up different if your CSS changes it
This means one should not change the default size of em if they want to give the image preloader truthful information

W3C Media Queries:

This media query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.
 @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
The ‘em’ value is relative to the initial value of ‘font-size’.

回答2:

5.1.1. Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units

Aside from ‘rem’ (which refers to the font-size of the root element), the font-relative lengths refer to the font metrics of the element on which they are used. The exception is when they occur in the value of the ‘font-size’ property itself, in which case they refer to the computed font metrics of the parent element (or the computed font metrics corresponding to the initial values of the ‘font’ property, if the element has no parent).

em unit

Equal to the computed value of the ‘font-size’ property of the element on which it is used.
http://www.w3.org/TR/css3-values/#font-relative-lengths

em css units are equal to the font size of the current element. The font-size property is inherited. Therefore the element (img in this case) will be sized according to 40 times the font-size property. If the user zooms the page (which increases the font size) the em unit's update to that of the font-size property automatically.

The base font size will be determined by the browser, if the browser is running on windows on mac and the user has not changed the font size then base font size will be 16px (usually). On Linux, BSD or any other system the font size will be set by the desktop environment and can vary.

So while conservatively you could assume that the font size is 16px, in a lot of cases you would be wrong.

来源：https://stackoverflow.com/questions/30653280/how-do-responsive-images-work-with-em-supplied-as-a-length-in-sizes

标签

html

image

responsive-design

srcset