How to define attributes like font-size, padding for mobile version in AMP for email?

Question

I tried to use media query to make the AMP email responsive, but looks like it isn't supported in AMP. However, I found out media="(max-width: 599px)" and media="(min-width: 600px)" can be defined for </amp-img/>, but the same media method cannot be used to define font-size only in mobile version.

I also tried </amp-fit-text/> but both desktop & mobile content is appearing in email. I want to change font-size or similar attributes value in mobile version.

Any suggestions would be much helpful!

Desktop content

<div style="background:#005AF0; color: #FFF;">
      <amp-fit-text width="200" height="200" layout="responsive" min-font-size="40">
          Desktop content
      </amp-fit-text>
</div>


Mobile content

<div style="background:#005AF0; color: #FFF;">
    <amp-fit-text width="200" height="200" layout="responsive" max-font-size="22">
        Mobile content
     </amp-fit-text>
</div>

Answer 1

Media queries in CSS is supported in AMP for Email:

https://amp.dev/documentation/guides-and-tutorials/email/develop/style_and_layout/control_layout#css-media-queries

Only a subset of media features are allowed:

https://amp.dev/documentation/guides-and-tutorials/email/learn/email-spec/amp-email-css#media-features

You should be able to style your emails differently on mobile using the font-size CSS property nested under media queries. Here's an example: https://jsfiddle.net/k8bgqo54/.

The media="(max-width: 599px)" construct you mentioned is called "element media queries, which are supported only on AMP components:

https://amp.dev/documentation/guides-and-tutorials/email/develop/style_and_layout/control_layout#element-media-queries