响应式图像如何与以“sizes”长度形式提供的“em”一起使用？答案

【问题标题】：How do responsive images work with `em` supplied as a length in `sizes`?响应式图像如何与以“sizes”长度形式提供的“em”一起使用？
【发布时间】：2015-08-19 14:55:36
【问题描述】：

在响应式图像中使用em 单元时，浏览器如何理解？

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

这验证了，我没有在浏览器控制台中看到警告。但是，如果图像预加载器的全部目的是在下载和解析 CSS 之前获取图像，那么浏览器对em 有什么用？

它是否只是默认的font-size 应用于<html>？为了清楚起见，我应该使用rem 吗？用户缩放时两者有区别吗？

这不是理论上的；我是using em in my media query breakpoints，有些图像受容器的限制，容器的大小适合最佳行长（当然是using em）。

我检查了规范，但新的响应式图像功能非常简洁。

【问题讨论】：

标签： html image responsive-design em srcset

【解决方案1】：

5.1.1。字体相对长度：“em”、“ex”、“ch”、“rem”单位

除了“rem”（指根元素的字体大小）之外，字体相对长度指的是使用它们的元素的字体度量。例外情况是它们出现在 'font-size' 属性本身的值中，在这种情况下，它们指的是父元素的计算字体度量（或对应于 'font' 属性的初始值的计算字体度量，如果元素没有父元素）。

em 单位

等于使用它的元素的“font-size”属性的计算值。
http://www.w3.org/TR/css3-values/#font-relative-lengths

em css 单位等于当前元素的字体大小。 font-size 属性被继承。因此元素（在这种情况下为img）将根据font-size 属性的40 倍来调整大小。如果用户缩放页面（这会增加字体大小），em 单元会自动更新为 font-size 属性。

基本字体大小将由浏览器决定，如果浏览器在 mac 上的 windows 上运行并且用户没有更改字体大小，那么基本字体大小将为 16px（通常）。在 Linux、BSD 或任何其他系统上，字体大小将由桌面环境设置并且可能会有所不同。

因此，虽然保守地您可以假设字体大小为 16 像素，但在很多情况下您会错的。

【讨论】：

对，但是浏览器预加载器在没有 CSS 的情况下会做什么来告知 em 原来是什么？
哦，当然，我了解图像最终的大小。但是当浏览器预加载器不得不猜测图像会有多大时，只给定sizes 属性并且还没有任何CSS 尚未被处理成渲染树，em 是否有指定值？
你是否有一个测试用例来检查不同浏览器和根字体大小设置的计算值？

【解决方案2】：

我在 W3C 官方#respimg 聊天室里听了那些家伙的耳朵，this is what they had to say：

请原谅我，伙计们，我有一个关于在 sizes 中使用时如何解释 em 的问题
Tigt：与媒体查询相同 - 它们与初始字体大小有关。
（不是上的字体大小，initial 字体大小，由用户的个人设置设置。）

16px 几乎无处不在，只要你没有更改 html 的 font-size。
Tigt：rem 在这里被视为与 em 相同。

所以速读是：

在sizes 或媒体查询中使用时，em 和rem 都指定为“用户的默认font-size”。
如果您的 CSS 更改它，控制图像在页面上的布局方式的实际 em 或 rem 最终可能会有所不同
这意味着如果他们想向图像预加载器提供真实信息，则不应不更改em 的默认大小

W3C Media Queries:

如果视口的宽度大于 20em，则此媒体查询表示样式表可在屏幕和手持设备上使用。
 @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
‘em’值是相对于‘font-size’初始值的。

【讨论】：

@humble.rumble：嗯，看来你还没有理解具体的问题。 Mac 和 Windows 上 Safari/Chrome/Firefox 甚至 IE 的默认字体大小是 16px，如果您不在配置中更改它。
这对我来说太难了，因为我将html 的font-size 设置为更大的窗口尺寸，以便放大所有内容:(
“不应更改em 的默认大小”是什么意思？你的意思是在浏览器的首选项中，还是通过设置html { font-size: ... }？
@Flimm 类似html { font-size: 16px }，是的（因为browsers do change their default to something other than 16）