Is there a way to add multiple media queries to the `media` AMP attribute?

Question

I'm trying to figure out the syntax for multiple media queries in the media attribute for amp components:

<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}
  />

But this doesn't behave correctly, is this supported by AMP's media attribute?

Here's the documentation but there is no example of multiple media queries: https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/control_layout/?format=websites#element-media-queries

score 1 · Answer 1 · answered Feb 17 '21 at 15:03

Figured it out, it's just the standard css declaration for multiple media queries

<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}
  />

Is there a way to add multiple media queries to the `media` AMP attribute?

1 Answers1