响应式 HTML 模板答案

【问题标题】：Responsive Html Template响应式 HTML 模板
【发布时间】：2013-08-18 16:42:16
【问题描述】：

您好，我必须编写响应式 html 电子邮件模板的代码，我希望您澄清一下，如果我为不同的分辨率添加媒体查询，例如像这样的某些事情，我的模板是否会响应

@media only screen and (max-width: 480px){
table[class=wrapper]
{
    width:100% !important;
}
table[class=main_table]
{
    width:320px !important;
    width:100% !important;
}

（这只是为了澄清我的观点，当然我必须为整个模板添加这个）

如果我添加这些查询，模板会响应吗？

【问题讨论】：

您使用table[class=wrapper] 而不是table.wrapper 有什么特别的原因吗？另外，你不希望这些!important 标记在那里。
根据您问题的性质，我会先检查这里。 webdesignerwall.com/tutorials/responsive-design-in-3-steps你真的可以在几分钟内得到它的要点。
还有一件事，如果您打算手动重新调整布局以适应每个分辨率 - 不要这样做。熟悉 Twitter Bootstrap。它将使您的生活和工作流程更加高效。
好建议，这可能是一个愚蠢的问题，但对我真的很有帮助。我肯定会帮助很多人
class method 是电子邮件设计者用来阻止雅虎默认显示媒体查询的一种技术。我相信雅虎最近已经解决了这个错误。

标签： html css media-queries html-email

【解决方案1】：

添加媒体查询将使您的电子邮件“响应”，当然前提是它设置正确且功能正常。在您的示例中，您需要将这些类添加到适当的表中以使它们生效。因此，作为一般规则，使用媒体查询 = 响应式。

一个出色的响应式模板是 this one 在 Adid 上的电子邮件。

【讨论】：