是否正在使用媒体查询来切换amp-img的推荐做法？

Question

一个例子

<amp-img
 media="(min-width: 650px)"
 src="wide.jpg"
 width=466
 height=355
 layout="responsive" >
</amp-img>
<amp-img
  media="(max-width: 649px)"
  src="wide.jpg"
  width=527
  height=193
  layout="responsive" >
</amp-img>

现在我们不是通过重复它们来污染HTML，它可以通过布局填充完成，并在媒体更改时为父包装器提供所需的高度，例如

/*figure can be given desired height and width on media queries */
<figure>
  <amp-img
   src="wide.jpg"
   layout="fill" >
 </amp-img>
</figure>

因此，请帮助我了解何时应该在什么情况下使用它们？

Answer 1

答案已在文档中

  

例如，我们这里有 2张互斥媒体查询的图片。根据屏幕宽度，将获取并呈现一个或另一个。

谢谢你们

Answer 2

另一种方法是使用带有srcset元素的amp-img来描述在不同视口宽度和像素密度下加载哪些图像。