我正在开发我的第一个电子邮件移动模板，使用媒体查询。到目前为止一切顺利，媒体查询很酷，从现在开始我肯定会在我的网页设计项目中使用它。
但是，我遇到了一个困难；我有一个非常复杂的标题设计（背景图片带有 Facebook 和 youtube 徽标，链接到相应的页面），所以它以特定的方式切片。这使得制作移动版本不太容易，我想也许我可以用不同的方式修复它：使用两个不同的标题表，一个在大型设备上显示，一个在小型设备上显示。
移动部分没有问题，因为它们很好地解释了嵌入式 CSS。
但我似乎无法为其他邮件客户端隐藏完整的表格。我试过 display:none, position:absolute with top and left -9999px 等...
有人对此有解决方案吗？这会节省我很多时间。
好的，我似乎自己找到了解决方案：
内联，在表格内要隐藏在普通非移动版本中的元素上，我放置了以下属性：
line-height:0px;
font-size:0px;
height:0px;
margin:0;
padding:0;
我现在正在用一张在 td 内有一个 tr、一个 td 和一个 p 的表对其进行测试。
我将这些属性放在几乎每个元素上：
<table cellpadding="0" cellspacing="0" border="0" align="center" id="hidden">
<tr class="showmobile" style="line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">
<td class="showmobile" style="line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">
<p class="showmobile" style="color:White; line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">Testing this shiznit</p>
</td>
</tr>
</table>
我还给这些元素一个类“showmobile”，我在头部的内部样式表中像这样操作它：
tr[class="showmobile"]
{
line-height:125% !important;
font-size:16px !important;
height:30px !important;
}
td[class="showmobile"]
{
line-height:125% !important;
font-size:16px !important;
height:30px !important;
}
p[class="showmobile"]
{
line-height:125% !important;
font-size:16px !important;
height:30px !important;
}
这种选择课程的方式，我从很棒的 html 电子邮件样板 @ http://htmlemailboilerplate.com/ -> 链接到这篇文章： http: //www.campaignmonitor.com/blog/post/3457/media-query -issues-in-yahoo-mail-mobile-email/ -> 基本上，它使雅虎邮件运行良好，并且在不需要时不会在媒体查询中应用 CSS。
结论：我已经在四个平台上对其进行了测试：GMail、Outlook 2010、Lotus Notes（我知道！）和 iPhone 3G。它们都给出了预期的结果，除了 Outlook，它仍然显示 1 像素线。使用一些智能内容（将文本着色以在背景中上升），这是非常可隐藏的。
如果我遇到某些邮件客户端的任何问题，我会及时通知你们。
将表格放在 div html 标记中，并将其样式添加为display:none !important在媒体查询中。
经过一番战斗，我能够想出这个。
CSS：
@media all and (max-width: 480px) {
.mobile-hide {
width:1px !important;
display:none !important;
color:#fff;
}
.mobile-show {
display:block !important;
line-height:125% !important;
font-size:14px !important;
height:auto !important;
color:#666 !important;
}
.mobile-image {
width:350px !important;
height:446px !important;
}
.w800 {width:400px !important;}
}
的HTML：
<table class="w800" width="800">
...
<tr><td>
<a href="http://mylink"><img src="image.jpg" width="300" height="300" border="0" alt="My Sweet Image" /></a>
</td>
<!-- a big fat image on the right for big screens only -->
<td class="mobile-hide">
<img class="mobile-hide" src="image2.jpg" width="450" height="500" border="0" alt="" />
<span class="mobile-hide">
My Text with a <a href="http://mylink" class="mobile-hide">link</a></span>
</td></tr>
...
</table>
<!-- a new table at the bottom for small screens only, "one column" -->
<table width="400" style="width:400px; margin:0 auto;">
<tr><td class="mobile-show" style="line-height:0px;font-size:0px;height:0px;margin:0;padding:0;">
<img class="mobile-image" src="image2.jpg" width="1" height="1" border="0" alt="" />
<span class="mobile-show" style="font-size:1px; color:#ffe;">
My Text with a <a href="http://mylink" style="text-decoration:none; color:#ffe;" class="mobile-show">link</a></span>
</td></tr>
</table>
你需要设置：
style="vertical-align:top;line-height:0px;font-size:0px;height:0px;margin:0;padding:0;mso-hide:all;"
这将为您提供跨多个电子邮件应用程序的最大隐身性，然后您可以使用媒体查询来反转效果。
litmus.com 可以作为一个很好的工具。
我提出了一个稍微优雅的解决方案，它似乎适用于所有流行的 webmail 和桌面电子邮件客户端，除了 Lotus Notes 6 和 7（可以预见）。开始了：
<style>
@media only screen and (max-width: 480px) {
.invisible { max-height: none !important; font-size: 12px !important; display: block !important; }
}
...
.invisible { max-height: 0px; font-size: 0; display: none; }
</style>
这是我的结果——你认为这也是一个可行的解决方案吗？
这是我用来隐藏和显示内容的 html 电子邮件。基本的、易于理解的“移动”和“桌面”类。'Mobile' 仅适用于移动设备。“桌面”仅用于桌面显示。
*[class=mobile]{display:none;}
@media only screen and (max-width:600px) {
*[class=desktop]{display:none !important;}
*[class=mobile]{display:block !important;width:auto !important;max-height:inherit !important;overflow:visible !important;float:none !important;}
*[class="block"]{display:block !important;padding:5px;}
}
但是，如果您希望在 Outlook 和 Gmail 中让您的电子邮件能够像您希望的那样工作，那么您必须走得更远一些。无论如何，这些电子邮件客户端都将显示桌面版本。但是您不希望他们显示移动内容，因此将所有移动内容包装在下面示例中显示的条件注释中。这将为您介绍 Outlook。
要让 Gmail 正常运行，您需要将所有元素归零并在 CSS 中扩展它们，无论如何 Gmail 将完全忽略这些元素。您不希望 Gmail 显示的所有内联内容都应该是 width: 0;max-height: 0;overflow: hidden;
这就是 CSS（上面的示例）发挥作用的时候。媒体查询中的第二个类声明将您的块扩展为适合在移动设备上显示的大小，而 Gmail 将其隐藏。
<!--[if !mso]><!-->
<td class="mobile" style="width: 0;max-height: 0;overflow: hidden;">
<img alt="" border="0" src="http://www.placehold.it/150x150" style="display:block;" width="100%">
</td>
<!--<![endif]-->
最后但并非最不重要的一点是，这最后一部分尚未经过测试。我一直无法让 Windows Mobile 隐藏我希望它隐藏的内容。我认为详细说明我的条件注释包装将通过将其更改为这样来解决问题：
<!--[if !mso]><!--><![if !IEMobile]>
<td class="mobile" style="width: 0;max-height: 0;overflow: hidden;">
<img alt="" border="0" src="http://www.placehold.it/150x150" style="display:block;" width="100%">
<![endif]><!--<![endif]-->
但同样，这最后一部分我还没有测试过，实际上明天会测试，但如果有人想详细说明 Windows Mobile，请做。我已经彻底测试过的所有其他内容。
display:none被gmail剥夺了！
要从 gmail 中隐藏表格，请将其显示为高度为零的块：将每个表格的内联样式设置为：display:block; overflow:hidden; height: 0; max-height: 0;
请记住将内联样式也应用于隐藏表的任何子表。覆盖类phoneTableOnly只需要在父表上。
下面的示例将仅显示支持最大宽度为 640 像素的媒体查询的设备上的表格。非常适合您不想在台式机和 gmail 上显示的仅限移动设备的菜单。
<style type="text/css">
/*Note: This stylesheet is ignored by gmail.*/
@media only screen and (max-width: 640px) {
/*Restore tables:*/
table[class="phoneTabletOnly"], table[class="phoneTabletOnly"] table {
display: table !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
}
}
</style>
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="phoneTabletOnly" style="display:block; overflow:hidden; height: 0; max-height: 0;">
<tbody>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="display:block; overflow:hidden; height: 0; max-height: 0;">
<tbody>
<tr>
<td>
This will be hidden in gmail.
</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" border="0" style="display:block; overflow:hidden; height: 0; max-height: 0;">
<tbody>
<tr>
<td>
This will also be hidden in gmail.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
PS。在石蕊试纸中测试。