我正在使用 Email on Acid responsive email template作为指南。我需要创建三列具有不同背景颜色和相同高度的文本，以响应较小的屏幕宽度。对于移动版本，列的高度应适应内容的大小。这看起来很容易用媒体查询实现，但电子邮件设计的问题之一是 gmail 不支持媒体查询。那么除了媒体查询之外，还有什么方法可以使这些列高度在桌面上保持一致，然后适应移动设备上的内容大小吗？
我在 fiddle 上放了一个代码示例。 http://jsfiddle.net/jackygrahamez/J6NLh/
样式表
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family:sans-serif}
table {border-collapse: collapse;}
@media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
}
@media only screen and (max-width: 479px) {
body[yahoo] .deviceWidth {width:280px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
}
HTML
<!doctype html>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family:sans-serif">
<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
<!-- Three Column Images -->
<!-- 3 Small Images -->
<table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#FFFFFF">
<tbody>
<tr>
<td valign="top">
<table width="31%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#002C53" style="margin-right:10px;">
<tbody>
<tr>
<td height="50" style="padding:0 10px;height:50px;">
<p style="color:#FFFFFF;font-size:24px;line-height:0px;">
1
</p>
</td>
</tr>
<tr>
<td valign="top" style="padding:0 20px;">
<p style="color:#FFFFFF;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis elit vitae felis ornare pulvinar. Sed quis sollicitudin lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec suscipit nunc quis tortor dapibus, eget ornare dolor volutpat. Duis a est sit amet urna consequat tempor sed quis justo. Nam molestie, risus sit amet dapibus molestie, augue neque posuere justo, non cursus nisl leo id quam. Maecenas luctus est non suscipit dapibus.
</p>
</td>
</tr>
</tbody>
</table><!-- End Image 1 -->
<table width="31%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#005E92" style="margin-right:10px;">
<tbody>
<tr>
<td height="50" style="padding:0 10px;height:50px;">
<p style="color:#FFFFFF;font-size:24px;line-height:0px;">
2
</p>
</td>
</tr>
<tr>
<td valign="top" style="padding:0 20px;">
<p style="color:#FFFFFF;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed iaculis neque. Proin congue velit at justo lobortis euismod.
</p>
</td>
</tr>
</tbody>
</table><!-- End Image 2 -->
<table width="31%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#008DCD" >
<tbody>
<tr>
<td height="50" style="padding:0 10px;height:50px;">
<p style="color:#FFFFFF;font-size:24px;line-height:0px;">
3
</p>
</td>
</tr>
<tr>
<td valign="top" style="padding:0 20px;">
<p style="color:#FFFFFF;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed iaculis neque. Proin congue velit at justo lobortis euismod. Sed congue mi vel leo ornare, in accumsan enim adipiscing. Cras lobortis augue a porta ullamcorper.
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- End Image 3 -->
</td>
</tr>
<tr>
<td><div style="height:6px"> </div></td>
</tr>
</tbody></table>
</td>
</tr>
</table>
</body>
最佳答案
如您所述，Gmail 不支持媒体查询。如果你想走媒体查询路线，你必须接受它不会有 100% 的兼容性 (chart)
还有一些其他方法可以让您的内容适合移动设备。参见 this link更多细节。而此链接为 bunch of examples
IMO 流体优先设计是可用的最佳技术。它在包括 Gmail 在内的主要客户端中得到 100% 的支持。如果您愿意，您可以在不分割整体设计的情况下使用媒体查询调整不太重要的部分。
关于css - 响应式电子邮件连列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23481207/