响应式电子邮件在 Outlook 中没有发挥作用答案

【问题标题】：Responsive email not doing its thing in Outlook响应式电子邮件在 Outlook 中没有发挥作用
【发布时间】：2014-06-25 16:49:03
【问题描述】：

我在获取响应式电子邮件模板以在 Outlook（桌面）中正确呈现时遇到了一些问题……惊喜。

我希望在移动设备上查看时右侧列位于左侧列下方（已实现）。然而，当在 Outlook 中查看时，它会将右侧列移动到一半，并在页面下方大约 50 像素。

这是给你的html和css；

    @media only screen and (max-device-width: 480px) {

    table[class="container"] {
        width:300px !important;
    }

    td[class="header_body"] {
        text-align:center !important;
        padding-bottom:10px !important;
    }

    td[class="header_left_col"] {
        text-align:center !important;
        padding-bottom:10px !important;
    }   

    }

<table cellpadding="0" cellspacing="0" border="0" width="600" align="center" class="container" bgcolor="#ffffff"><tr><td>

<table cellpadding="0" cellspacing="0" border="0" width="300" align="left" class="header_left_col"><tr><td>LOGO</td></tr></table>

<table cellpadding="0" cellspacing="0" border="0" width="300" class="header_right_col"><tr><td align="right">此处为正文</td></tr></table>

</td></tr></table>

提前致谢。

【问题讨论】：

简短的回答是：不要对电子邮件使用响应式技术，不幸的是大多数电子邮件客户端不支持它。

标签： html responsive-design outlook media-queries html-email

【解决方案1】：

在 Outlook 和许多其他电子邮件客户端中，对 CSS 的支持非常有限。 Outlook 根本不支持媒体查询 - 许多其他客户端也不支持它们。

这是一份综合指南，包括一些受欢迎的客户：

The Ultimate Guide to CSS

【讨论】：

【解决方案2】：

我在桌面上的内联减速之外的 CSS 工作几乎没有成功。 Apple 邮件和 Gmail 将成为您的移动目标受众，它们在响应式设计方面非常支持。欲了解更多详情，请访问campaign monitor。

【讨论】：

【解决方案3】：

简而言之，CSS 在电子邮件客户端中的工作方式有所不同。其中大部分根本不起作用，就像我们回到过去所说的使用基于表格的设计一样。 Mail Chimp 对这个主题有很好的参考：

http://kb.mailchimp.com/article/how-to-code-html-emails/

【讨论】：

【解决方案4】：

对于响应式电子邮件，最好/最常用的方法是在 <td> 元素上使用 display:block; 切换。这是一个基本示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    @media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
  </style>
</head>
<body>

  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="switch" width="50%">
         <img alt="" src="http://placehold.it/150x150" width="100%" style="margin: 0; border: 0; padding: 0; display: block;">
      </td>
      <td class="switch" width="50%" valign="top" style="padding:30px;">
        Text here...
      </td>
    </tr>
  </table>

</body></html>

【讨论】：