制作响应式电子邮件模板时遇到问题答案

【问题标题】：Trouble making responsive email template制作响应式电子邮件模板时遇到问题
【发布时间】：2014-05-01 15:40:24
【问题描述】：

我正在进行响应式电子邮件设计，但遇到了一些麻烦。它部分有效，但我认为我需要新的眼睛并提供帮助，因为我没有找到解决方案。我认为导航链接是造成大部分问题的原因，但不确定这是否真的是问题所在。

基本上，我希望电子邮件具有响应性，并且几乎可以堆叠到一个列中，但有例外。

我遇到的问题是：

整个页面没有完全响应 - （获取横向滚动的一部分）

宽幅广告 565x70 似乎没有改变尺寸

带有社交图标的顶部导航未正确堆叠。我希望左侧链接不移动（如果需要小屏幕，可能居中），但社交图标堆叠在其他链接下方。最好是 3 列宽，就像他们现在只想要菜单下方的图标一样。

徽标下方的导航菜单 - 在这里，我希望它们以较小的屏幕居中，但也可以按 2 列宽的顺序堆叠。我试过换行的流畅文本，但由于某种原因它似乎不起作用。

任何帮助将不胜感激。我已经测试并尝试了其他资源项，但似乎在根据其他资源应该可行的情况下失败了。

下面是模板的链接。

谢谢。

【问题讨论】：

【解决方案1】：

嗯，你需要一个响应式的 CSS。我是 Twitter Bootstrap 的忠实粉丝。你将把你的整个电子邮件设计成一个带有标签的普通网站，并包含你的 CSS。

您可以在这里查看这些很棒的响应式 CSS：

http://getbootstrap.com/
http://metroui.org.ua/
http://www.99lime.com/
http://purecss.io/
http://gumbyframework.com/

【讨论】：

【解决方案2】：

您正在为图像和表格设置内联宽度。标头中的 CSS 不能覆盖内联声明。

【讨论】：

【解决方案3】：

谢谢。似乎我大部分时间都有自己的每张桌子。所以我创建了包装器，仔细检查了重新添加的类的宽度等等。它现在似乎工作得很好。

有时一双新鲜的眼睛会有所帮助。再次感谢。

附： J.otero - 如果您将它用于网络，框架很好，但它们对电子邮件几乎没有任何作用。

【讨论】：