电子邮件签名的媒体查询，可能吗？答案

【问题标题】：media queries for email signature, possible?电子邮件签名的媒体查询，可能吗？
【发布时间】：2013-10-31 00:46:01
【问题描述】：

我知道 html 电子邮件中的媒体查询没有得到广泛支持，但是 html 电子邮件签名呢？我试过使用这段代码：

<style type="text/css">

    img#banner{display:block !important;
    }

    @media (max-width: 450px){

    img#banner{display:none !important;}
    }

</style>

将它放在包含签名内容的打开表格标记之前，可以在浏览器中使用，但在电子邮件客户端中似乎不起作用。我可能做错了什么或者它可能根本不受支持？我不知道？但如果支持的话，即使只有少数邮件客户端，也值得使用。

编辑：我已将横幅的宽度设置为 100%，因为横幅图形太宽并且在移动设备上看起来有点难看，所以我的想法是让它根本不显示。

<a class="link" href="http://www.website.com/">
    <img id="banner" style="width:100%;" alt="#" src="banner.gif">
</a>

编辑 2：似乎这 2 个 !important 标签是不好的，我在这里包含了一个修改后的媒体查询：

<style type="text/css">

    img#banner{display:block;
    }

    @media (max-width: 450px){

    img#banner{display:none;}
    }

</style>

虽然这似乎并没有更好的工作。我认为普遍的共识是媒体查询和电子邮件签名不能混为一谈。

【问题讨论】：

媒体查询仅在您在标头内指定设备宽度时才有效。
是的，我已将页眉的宽度设置为 100%，这样应该可以。我只是希望横幅太小而不会显示在移动设备上。

标签： css email media-queries html-email

【解决方案1】：

不幸的是，我认为您不能在电子邮件中使用媒体查询。 Here is a link

但是，您仍然可以设法修改您的 html 和 CSS 以覆盖您的图像，以便在每个设备上居中。

缩放背景图片以适应 div：

background-size: contain;

缩放背景图像以覆盖整个 div：

background-size: cover;

【讨论】：

感谢您的链接！本文得出的结论是，对于 iphone 和 ipad 邮件，媒体查询有效。尽管从我的测试来看，这似乎不是真的。据我所知，我的媒体查询是正确且非常简单的。 ps：感谢背景大小提示，尽管我认为这对我想要实现的目标没有帮助。
您是否尝试删除 !important 标签？注意：您的代码不适用于 gmail
使用媒体查询还有一个重要的因素，那就是“你如何-发送-电子邮件”。看，如果我从 Safari 以电子邮件的形式发送网页，媒体查询将保持不变；如果我从营销活动工具（如 cakemail）发送相同的 html 代码，媒体查询会更改并停止工作 + 可能会破坏布局。目前，电子邮件媒体查询还不够标准，我建议您在布局中使用 % 宽度。浏览器方面，这会让您感到惊讶，outlook.com 是呈现响应式电子邮件的最佳网站。雅虎邮件尽力而为，但您的查询需要一些技巧。
感谢 Romain 和 Lacorne，我认为我对这些媒体查询过于雄心勃勃，所以我可能会寻求不同的解决方案，也许使用背景图像，尽管我知道那是一个不同的世界完全痛苦。

【解决方案2】：

删除!important 对display:block; 的第一个样式的规则。两个人并肩作战往往会产生意想不到的结果。

【讨论】：

另外你真的应该内联display:block;，因为 gmail 剥离了所有样式标签。