响应式设计电子邮件模板的问题（css 和内联样式冲突）答案

【问题标题】：Issues with responsive design email template (css and inline styles conflicting)响应式设计电子邮件模板的问题（css 和内联样式冲突）
【发布时间】：2013-02-15 10:06:11
【问题描述】：

在我正在做的电子邮件营销活动中，我遇到了一些 CSS 和内联样式问题。

首先，我在使用@media css 时隐藏了元素 (display:none;) 以使它们以正确的顺序出现，因此我最终作弊了。这里的问题是在桌面 isp (gmail) 上显示时，它忽略了 (display:none;) 并最终在某些地方显示了双重内容。因此，我使用了双重内容消失（显示：无！重要；），然后影响了移动版本。

我在网上看到了一些移动模板，它们似乎没有经过太多测试，因为它们根本无法跨多个邮件客户端工作。

如果有人有任何建议或帮助，代码就在这里http://www.makeyourownmarket.com/test/test-doc.html

【问题讨论】：

在style标签中，为什么说table[id=header]而不是table#header？这种语法对于 id 来说非常不常见（尽管不一定是坏的）。出于好奇，这是有原因的吗？ :)

标签： css responsive-design html-email

【解决方案1】：

响应式电子邮件的一些提示：

把你的!important声明放在你所有的@media only screen and (max-width: 480px) CSS上
考虑解决方法，如果 display:none; 不起作用，请尝试在您的内联 CSS 中使用 width:0;height:0;，然后在您的移动样式中使用 width:100px !important;height:100px !important; 覆盖
您需要进行大量测试，最好为所有重要的电子邮件客户端提供一个帐户/设备，但http://www.emailonacid.com 工作很紧要。

【讨论】：

【解决方案2】：

我建议对 HTML 电子邮件及其局限性进行更多研究。

这篇文章是一个很好的起点： http://kb.mailchimp.com/article/how-to-code-html-emails

一些提示：

不要将 CSS 放在 STYLE 标记中，因为这不适用于所有电子邮件客户端。
仅使用内联 CSS
使用表格进行布局
如果媒体查询能够在电子邮件客户端中始终如一地工作，我会感到非常惊讶。我会避免尝试使用这些，而是专注于创建一个基本、可靠的电子邮件模板，该模板在最流行的电子邮件客户端中始终如一地显示。

【讨论】：

我从小是作为网络程序员/设计师长大的，而“使用表格进行布局”之后的廉价“设计师”是我一直在努力争取的那种东西。我在这方面已经不是很活跃了，但请告诉我，帝国没有反击……
但是在电子邮件环境中这不是完全不同吗？我认为电子邮件客户端正在使用非常轻量级的 html 处理器，也许表格是为他们解释的简单元素。
设计 HTML 电子邮件与为现代浏览器设计是完全不同的。许多 CSS 技术不可用。您可能必须使用表格来获得您想要的定位。这完全取决于您需要支持哪些邮件阅读器。这是一个巨大的痛苦，真的。

【解决方案3】：

我不认为响应式设计是电子邮件的正确方式。由于许多邮件客户端，通常在表格内发送电子邮件。你可以在这里找到更多关于这个Nettuts

【讨论】：

响应式电子邮件设计为quite common these days.
它不支持gmail、yahoo mail和outlook。他们是最大的邮件服务提供商，所以我认为这不是一个好的解决方案。
我完全同意，所以这使我们成为少数（或两个 Gmail 用户？）。尽管您提到的客户端的桌面版本不需要它并回退到全宽度，但缺乏支持问题只会在手机上真正出现。我想我们会同意这不是一个完整的解决方案，而是如今很常见的解决方案，因为不幸的是，大多数人认为世界始于 Mac 产品，也始于 Mac 产品结束。
两个 gmail 用户 :) 我期待看到功能齐全的响应式邮件。但是 gmail 不支持它对我来说很奇怪，因为 google 通常是第一个支持一些新功能的。显然很难在各种设备上呈现响应式邮件。是的，我同意 mac 产品
这是因为 Web 客户端不支持样式标签以阻止您的电子邮件超出其所属页面的部分。通过保持所有 css 内联并限制允许使用的 css，您无法破坏 Gmail 或在页面上应用全局 css 规则。媒体查询不能内联工作，这就是它们不受支持的原因。