建议使用媒体查询来切换amp-img吗? [英] Is using media queries to switch amp-img a recommended practice?

问题描述

一个例子

<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来污染HTML，可以通过布局填充并在例如媒体更改时为父包装指定所需的高度来完成

Now are we not polluting the HTML by repeating them, it can be done with layout fill and giving parent wrapper desired height on media change for example

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

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

Hence please help me to understand when should be use them on what scenarios?

推荐答案

答案已经在文档中

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

For example, here we have 2 images with mutually exclusive media queries. Depending on the screen width, one or the other will be fetched and rendered.

谢谢你们

这篇关于建议使用媒体查询来切换amp-img吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！