尊敬的网站开发人员，您好！
我在移动电话上的Outlook客户端中显示电子邮件时遇到问题，甚至在桌面PC上的Outlook上也有问题。
当我在Outlook中收到我的电子邮件并在IE中打开它时，我尝试调整它的大小，当涉及到需要切换到@media屏幕的断点时，它全部中断。它几乎发生在手机上的每个Outlook客户端。
这就是事情。当我在IE中打开的那封电子邮件上按F12时，我看到我的内联样式的宽度被划掉并且.col类生效了。但它仍然没有正确和响应地显示电子邮件。这只发生在outlook中。知道怎么解决吗？
以下是代码的一部分：
<style>
@media screen and (max-width: 525px) {
/* FLUID TABLES */
.wrapper {
width: 100% !important;
max-width: 100% !important;
}
/*COLUMNS TO ROWS */
.col {
display: block!important;
width: 100%!important;
border: none!important;
}
.img-max {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
}
.wide {
width: 100% !important;
}
}
</style>
<table style="padding-top: 0px;padding-right: 15px;padding-bottom: 0px;padding-left: 15px;table-layout: auto;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 15px;padding-bottom: 20px;padding-left: 15px; background-color: rgb(255, 255, 255);" class="section-pad" align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td align="center" valign="top" width="700">
<![endif]-->
<table style="max-width: 700px;table-layout: auto;" class="wide" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="background-color: rgb(236, 242, 248);">
<!-- HERO IMAGE -->
<table style="table-layout: auto; background-color: rgb(236, 242, 248); width: 92%;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td class="col" align="center" valign="top" style="width: 65%; padding-left: 0px; background-color: rgb(236, 242, 248);">
<table style="table-layout: auto; background-color: white; padding-left: 10px; padding-right: 10px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 0;padding-left: 20px;font-size: 26px;line-height: 30px;font-weight:400; font-family: Arial, sans-serif; color: #0056a6;" align="left"><img src="/resources/handlers/dcimage.ashx" style="height: auto; display: inline;" border="0">,</td>
</tr>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; font-size: 14px; font-weight:normal; line-height: 14px; font-family: Arial, sans-serif; color: #2d353d;" align="left">
LOREM IPSUM
</td>
</tr>
</tbody>
</table>
</td>
<td style="background-color: rgb(236, 242, 248); width: 35%; padding-right: 0px;" class="col" align="center" valign="top">
<p valign="middle" style="line-height: 40px; font-size: 12px; color: white; font-family: Arial, sans-serif; background-color: rgb(0, 86, 166);">
In case you need to contact us</p>
<img src="/r1.jpg" alt="telephone" class="img-max" border="0" height="50" width="240">
<img src="/r2.jpg" alt="skype" class="img-max" border="0" height="50" width="240">
<img src="/r3.jpg" alt="mail" class="img-max" border="0" height="50" width="240">
<img src="/r4.jpg" alt="web" class="img-max" border="0" height="50" width="240">
</td>
</tr>
<tr>
<td class="col" align="center" valign="top" style="width: 65%;">
<img src="/r2.jpg" class="img-max">
</td>
<td style="background-color: rgb(236, 242, 248); width: 35%;" class="col" align="center" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
答案 0 :(得分：1)
如果我理解正确的话，你想要的行为就是用class =＆＃34; col＆＃34;来放弃每个列的市场。当您对小屏幕的媒体查询生效时，连续进行。
首先，Outlook将删除所有内嵌样式（正如您注意到使用F12），因此最好使用每个元素的等效html属性将其加倍。
其次，Outlook（以及Lotus Notes 8＆amp; 8.5）不支持max-width，因此您需要包装您内部的<table>内的每个<!--[if (gte mso 9)|(IE)]>
<table width="525" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table style="table-layout: auto; background-color: white; padding-left: 10px; padding-right: 10px;" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 0;padding-left: 20px;font-size: 26px;line-height: 30px;font-weight:400; font-family: Arial, sans-serif; color: #0056a6;" align="left"><img src="/resources/handlers/dcimage.ashx" style="height: auto; display: inline;" border="0">,</td>
</tr>
<tr>
<td style="padding-top: 15px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px; font-size: 14px; font-weight:normal; line-height: 14px; font-family: Arial, sans-serif; color: #2d353d;" align="left">
LOREM IPSUM
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
＆＃39; col＆＃39;列成条件代码，创建一个具有设置宽度的表来保存所有内容，以IE和Microsoft Outlook为目标。你需要使用类似的东西：
Book我强烈建议您按照此guide to build responsive emails that work on all major mail clients进行更深入的解释，以及使电子邮件在Outlook上工作的其他非常有用的技巧：）
答案 1 :(得分：1)
嗯，我不确定移动Outlook应用是否支持媒体查询。移动应用程序在渲染标记方面比在桌面版本上更好（无论如何在Windows上）。
无论如何，混合设计可实现响应式变形布局，而无需依赖媒体查询。上面的代码正朝着正确的方向前进，尽管下面的例子有点不同。这是来自Fabio Carneiro's code samples on GitHub的基本2列脚手架（全部归功于他！）：
<!doctype html>
<html>
<body style="margin:0;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] -->
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--// DEVELOPER NOTES:
1. Setting font-size:0; is necessary to ensure
that there is no extra spacing introduced
between the centering divs that wrap each
of the columns. //-->
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<!--// DEVELOPER NOTES:
1. To have each column center upon stacking,
wrap them in individual divs, set the same
max-width and width as the table within it,
and set display to inline-block; using
vertical-align is optional.
2. Setting min-width determines when the two
columns of this block will wrap; in this
case, when the total available width is
less than or equal to 480px. //-->
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
<!-- // REPLACE WITH BLOCK -->
<p style="background-color:#2BAADF; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">LEFT</p>
<!-- REPLACE WITH BLOCK // -->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="330">
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
<tr>
<td align="center" valign="top">
<!-- // REPLACE WITH BLOCK -->
<p style="background-color:#51BBE5; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">RIGHT</p>
<!-- REPLACE WITH BLOCK // -->
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // -->
</table>
</center>
</body>
</html>
该回购和其他地方有更多的脚手架和模式，但这显示了行动的基本原则。
（如果你还不知道这是如何工作的）这个方法使用最大宽度和最小宽度来强加刚性基线（允许一些移动）并为受到桌面束缚的Outlook施加固定的宽宽度无论如何。一旦设置了适合移动设备的基线，媒体查询就会在支持它的客户端（如iOS Mail）中逐步增强电子邮件。
答案 2 :(得分：0)
我记得，Outlook移动应用不支持响应式电子邮件。我不认为显示：阻止;将在他们身上工作（与大多数Android电子邮件客户端相同）。您只使用 的响应式方法可以在iPhone原生应用上可靠地运行。