如何在AMP for Email中为移动端定义font-size、padding等属性？

核心解决思路 #

AMP邮件不支持常规CSS媒体查询，但可以给容器标签（比如<div>）添加media属性来控制不同屏幕尺寸下的内容显示，再结合amp-fit-text调整字体大小，就能避免桌面和移动端内容同时出现的问题。

修改后的代码示例 #

<!-- 桌面端内容（屏幕宽度≥600px时显示） -->
<div media="(min-width: 600px)" style="background:#005AF0; color: #FFF;">
    <amp-fit-text width="200" height="200" layout="responsive" min-font-size="40">
        Desktop content
    </amp-fit-text>
</div>

<!-- 移动端内容（屏幕宽度≤599px时显示） -->
<div media="(max-width: 599px)" style="background:#005AF0; color: #FFF;">
    <amp-fit-text width="200" height="200" layout="responsive" max-font-size="22">
        Mobile content
    </amp-fit-text>
</div>

关键细节说明 #

• 给包裹amp-fit-text的<div>添加media属性，指定对应的屏幕尺寸条件，这样只有符合条件的容器会被渲染，不会同时显示桌面和移动端内容。
• amp-fit-text的min-font-size和max-font-size可以精准控制对应场景下的字体大小范围，配合responsive布局，能让字体自适应容器尺寸。
• 如果不想重复写两遍内容，可以把文本放在隐藏的<span>里，用amp-fit-text的select属性引用，但要确保文本长度适配两种场景的字体大小要求。

内容的提问来源于stack exchange，提问作者Chandana