HTML 电子邮件模板：是否可以添加仅适用于移动设备的特定 CSS 规则，该规则也适用于 Gmail

Question

我有一个 2 列 html 模板，其中有几个由边框分隔的块。

是否可以制作一个 Gmail 友好的代码来绕过移动分辨率的边界？据我所知，gmail 不读取媒体查询。

<table ...>
    <tr>
        <td style="border-right: 1px solid #000;padding-left:20px;">...</td>
        <td style="padding-left:20px;">...</td>
    </tr>
</table>

谢谢

Answer 1

不，Gmail 不支持媒体查询。这是不可能的。

Answer 2

虽然 Gmail 不支持媒体查询是正确的，但如果您在默认版本中构建无边框（内联样式）并使用媒体查询和嵌入式样式表为其设置样式，您仍然可以执行此操作桌面版。

（'Gmail first' 代码的良好起点 - http://labs.actionrocket.co/the-hybrid-coding-approach-2）

对于 Gmail 网络客户端，您可以尝试使用语言 'trick'：http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/。

这个选项绝不是一个通用的解决方案，因为它需要相当多的代码和全面的测试。此外，并非所有样式都被电子邮件客户端通过媒体查询和嵌入式样式表接受。

这也确实意味着像 Google 应用程序（也忽略所有样式表）这样的客户端将显示移动版本。

HTML 电子邮件模板：是否可以添加仅适用于移动设备的特定 CSS 规则，该规则也适用于 Gmail

HTML e-mail template: Is it possible to add specific CSS rule for mobile only, that works on Gmail as well

html

css

email

html-email

email-client