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

【问题标题】：HTML e-mail template: Is it possible to add specific CSS rule for mobile only, that works on Gmail as wellHTML 电子邮件模板：是否可以仅为移动设备添加特定的 CSS 规则，该规则也适用于 Gmail
【发布时间】：2016-04-13 00:39:56
【问题描述】：

我有一个 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>

谢谢

【问题讨论】：

标签： html css email html-email email-client

【解决方案1】：

虽然 Gmail 不支持媒体查询是正确的，但如果您在默认版本（内联样式）中构建无边框并使用媒体查询和嵌入式样式表在桌面上设置样式，您仍然可以做到这一点版本。

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：