Question

我在使用响应式电子邮件模板在Outlook（桌面）中正确呈现时遇到了一些麻烦......惊喜。

我希望在移动设备（已实现）上查看时，右侧列位于左侧列的下方。然而，当在Outlook中查看时，它会将右侧列放在中间位置，并将页面大约50px缩小。

这是你的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 {1}}

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

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

提前致谢。

Answer 1

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

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

The Ultimate Guide to CSS

Answer 2

我在桌面上的内联减速之外工作的CSS几乎没有成功。 Apple邮件和Gmail将成为您移动设备的目标受众，他们在响应式设计方面非常支持。有关详细信息，请参阅campaign monitor。

Answer 3

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

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

Answer 4

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

<!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>

响应式电子邮件在Outlook中没有做到这一点

4 个答案: