Question

我是AMP-HTML的新手，试图创建一个简单的仅AMP站点，需要确定查看设备是高dpi移动设备还是台式设备。

我了解如何通过媒体查询来做到这一点，但是使用AMP专用代码是否有更好/更好的方式？

我在增强我对AMP的了解，但是我错过了什么吗？

Answer 1

就像您提到的那样，首选使用媒体查询，但是AMP具有一些附加功能，例如元素上的media属性，在某些情况下可以更轻松地做到这一点。

在自适应设计中，您可以使用CSS @media查询针对各种屏幕尺寸来定制网页的样式，而不必更改页面的内容。在AMP中，您可以继续使用相同的CSS @media查询。另外，为了更好地控制AMP元素，可以在元素上指定media属性。当您需要根据媒体查询显示或隐藏元素时，此功能特别有用。有关使用media属性的示例，请参见Changing the art direction of an image部分。

media属性的简单示例是：

<!-- Won't display on screens smaller than 500px -->
<amp-img alt="cat"
  media="(min-width: 500px)"
  width="650"
  height="340"
  src="cat.jpg"></amp-img>

可以通过CSS实现相同的目标

<style amp-custom>
  @media screen and (max-width: 499px) {
    .catimg {
      display: none;
    }
  }
</style>

[ ... ]

<amp-img alt="cat"
  class="catimg"
  width="650"
  height="340"
  src="cat.jpg"></amp-img>

如何识别仅适用于AMP的站点的台式机或移动设备

1 个答案: