amp-html - 有没有办法向 `media` AMP 属性添加多个媒体查询？

Question

我正在尝试找出 amp 组件的 media 属性中多个媒体查询的语法：

<AmpImgPlaceholder
    media={`(min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}), (max-width: ${GEL_GROUP_3_SCREEN_WIDTH_MAX})`}
    width="77px"
    height="22px"
    src={darkMode ? bgImageDark : bgImageRegular}
  />

但这不正确，AMP的媒体属性是否支持？

这是文档，但没有多个媒体查询的示例：https ://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/?format=websites#element-media-queries

Answer 1

想通了，这只是多个媒体查询的标准 css 声明

<AmpImgPlaceholder
    media={`(min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) and (max-width: ${GEL_GROUP_3_SCREEN_WIDTH_MAX})`}
    width="77px"
    height="22px"
    src={darkMode ? bgImageDark : bgImageRegular}
  />