html - 有没有办法在 gmail 中隐藏图像以进行 html 响应式电子邮件构建？

Question

我正在构建一封电子邮件，该电子邮件必须将图像隐藏在桌面上并显示在移动设备上。唯一可以做到这一点的方法是使用 gmail 不支持的 display none。

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

问题仅在gmail中

非常感谢

Answer 1

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

编辑：尝试添加mso-hide:all;到您的内联 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;
}