Question

我正在制作一封电子邮件，必须将图片隐藏在桌面上并显示在手机上。只有你可以这样做的方法是使用gmail不支持的display none。

我想知道是否有其他方法可以隐藏桌面版本上的图像，以便我可以使用媒体查询来设置移动版本中的电子邮件样式。

问题仅在于gmail

非常感谢

Answer 1

在桌面的内嵌样式中，制作图片width的{{1}}和height。然后使用您的响应式媒体查询CSS将图像恢复到适当的大小。

修改：尝试将0添加到内联css以修复Outlook问题。

Answer 2

为了隐藏HTML电子邮件中的元素并让其在Gmail中运行，您需要将其归零并调整CSS中的大小（Gmail将忽略该位置）。

像这样：

<style>
    @media only screen and (max-width: 480px) { 
    *[class~=show_on_mobile] {
        display : block !important;
        width : auto !important;
        max-height: inherit !important;
        overflow : visible !important;
        float : none !important;
    }
</style>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <!--[if !mso]><!-->
        <td style="width: 0; max-height: 0; overflow: hidden; float: left;">
        </td>
    </tr>
    <!--<![endif]-->
</table>

此外，添加的条件注释涵盖了Outlook 07。

Answer 3

桌面的内联样式：

style="max-height:0;width:0;"

响应式css @media查询：

max-height: none !important;
width: auto !important;

像魅力一样工作：）

Answer 4

hidden不是display的有效值。

尝试：

{
    display:none;
}

或者，如果仍然无效，请尝试：

{
    visibility:hidden;
    width:0;
    height:0;
    padding:0;
    margin:0;
}

有没有办法隐藏图像在Gmail的html响应电子邮件构建？

4 个答案: