Issue
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.
Solution
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
emis interpreted when used insidesizes
<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-sizeofhtml.
<TabAtkins> Tigt: rem is treated identical to em here.
So the speed-read is:
- When used in
sizesor media queries,emandremare both specced to mean "the user's defaultfont-size. - The actual
emorremthat 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
emif they want to give the image preloader truthful information
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’.
Answered By - Tigt Answer Checked By - Timothy Miller (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.