6

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吗？当用户缩放时，两者之间有区别吗？

这不是理论上的；我在我的媒体查询断点中使用em，并且一些图像受容器的限制，该容器的大小适合最佳行长（当然是使用em）。

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

4

2 回答 2

6

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

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

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

所以速读是：

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

W3C 媒体查询：

如果视口的宽度大于 20em，则此媒体查询表示样式表可用于屏幕和手持设备。

 @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

'em' 值是相对于 'font-size' 的初始值的。

于 2015-06-05T20:17:33.477 回答
-1

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

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

单位

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

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

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

所以虽然保守地你可以假设字体大小是 16px，但在很多情况下你会错的。

于 2015-06-04T20:16:46.983 回答