我正在为移动设备优化HTML电子邮件.我的任务是找到一个通用的解决方案来创建一个2列到1列的响应式布局.我发现了一篇由Campaign Monitor撰写的文章 - http://www.campaignmonitor.com/guides/mobile/responsive/.我已经试过他们的标记,它适用于大多数用户和浏览器与Outlook 2007,2010年例外,和2013年我提供了我的标记以供参考的jsfiddle链接.有没有办法在这些版本的Outlook中使这个工作？
编辑:我不是试图使电子邮件的响应部分在Outlook中工作.我希望2个表(jsfiddle示例中的Left和Right)彼此相邻显示而不是堆叠在一起.这适用于Gmail(IE,FF,Chrome,Safari),AOL(IE,FF,Chrome,Safari),Yahoo(IE,FF,Chrome,Safari),Hotmail(IE,FF,Chrome,Safari),Apple Mail 4 &5,Outlook 2003,Android 4.0,iOS 4,5和6.我只关注Outlook 2007及更高版本的渲染引擎.
<html>
<head>
<style>
@media all and (max-width: 590px){
*[class].responsive{ width: 320px !important; }
}
</style>
</head>
<body>
<table width="100%" style="background-color: #000;" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="15"></td>
</tr>
<tr>
<td width="100%">
<table width="560" style="background-color: #fff;" align="center" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%">
<table width="280" align="left" cellpadding="0" cellspacing="0" class="responsive">
<tbody>
<tr>
<td width="100%" height="40" style="background-color: #ececec;">
<div height="40" style="font-weight:bold; font-family:Helvetica,sans-serif; text-align:center;">Left (top)</div>
</td>
</tr>
</tbody> …