做出高度响应的放大器清单

Question

我正在尝试使放大器清单的高度响应

<amp-list width="100" height="1980" [height]="660 * page.items.posts.length" layout="responsive" src="/get_posts/" [src]="'/get_posts?page=' + page" binding="no" reset-on-refresh single-item> 
  <template type="amp-mustache">
    {{#posts}}
      <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12">
      Post
      </div>
    {{/posts}}
  </template>
</amp-list>

如您所见，每次收到新帖子时，身高都会发生变化。问题是它在台式机上运行良好，但在移动设备上，由于高度很小，我只能看到前三个帖子。在台式机上，我的宽度很大，因此我可以按行获得3列，但在移动设备上，我只能按行获得1列，这就是为什么我需要更高的高度，是否可以解决此问题？

Answer 1

您可以在放大器元素上使用媒体属性，请参阅放大器页面-

https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/

示例-

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

<amp-img
    media="(max-width: 640px)"
    src="small.jpg"
    width="527"
    height="355"
    layout="responsive">
</amp-img>

以上两个元素将根据每个元素中写入的媒体属性条件进行显示。当显示尺寸最小宽度：650px]时将显示第一个。