响应式图像如何与以“sizes”的长度提供的“em”配合使用？

Question

响应式图像如何与以“sizes”的长度提供的“em”配合使用？

Tig*_*igt 6 html image em responsive-design srcset

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

这不是理论上的；我用em我的媒体查询断点，以及一些图片被限制由容器大小的最佳线路长度（使用em，当然）。

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

Answer 1

Tig*_*igt 6

我在 W3C 官方 #respimg 聊天室里听到了那些家伙的耳朵，这就是他们不得不说的：

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

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

所以速读是：

当使用sizes或媒体查询，em并且rem都specced表示“用户的默认font-size。
如果您的 CSS 更改它，实际em或rem控制图像在页面上布局的方式最终可能会有所不同
这意味着，一个人应该不会改变的默认大小em，如果他们想给预加载真实信息的图像

W3C 媒体查询：

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

这对我来说很粗糙，因为我将 `html` 的 `font-size` 设置为较大的窗口大小，以便放大所有内容:( (2认同)

归档时间：	10 年，6 月前
查看次数：	2990 次
最近记录：	10 年，6 月前