这篇精彩的文章介绍了如何创建响应表,将其精美地扩展到移动浏览器.
现在我试图将相同的技术应用于html电子邮件,但显示：块似乎不会在html电子邮件中工作.
重现问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<Meta charset="utf-8">
<style type="text/css">
@media only screen and (max-width: 760px),screen and (max-device-width: 480px) {
/* Force table to not be like tables anymore */
table,td,tbody,tr{
display: block;
width:100%;
padding:0;
clear:both;
}
td {
/* Behave like a "row" */
position: relative !important;
}
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid red;">1/1</td>
<td style="border:1px solid red;">1/2</td>
<td style="border:1px solid red;">1/3</td>
</tr>
<tr>
<td style="border:1px solid red;">2/1</td>
<td style="border:1px solid red;">2/2</td>
<td style="border:1px solid red;">2/3</td>
</tr>
</table>
</body>
</html>
2)在Safari中打开页面
3)调整窗口大小以注意表格如何随窗口大小而变化
4)按CMD i或File->此页面的邮件内容创建一个HTML电子邮件
5)调整电子邮件窗口的大小,注意表格如何正确调整大小
6)发送电子邮件给自己并打开它.
解决方法
接受的答案提供了一些很好的信息,但它并没有直接解决问题.我最近一直在尝试回应电子邮件,并提出了一些其他人可能会发现有用的好方法.开始了…
要回答这个问题,可以使用display：block;使表列在某些移动设备(Android,iOS和Kindle)上的行行为.
以下是一个示例,显示如何在移动设备上制作2列布局堆栈(右列左上方的列).
HTML
<table class="deviceWidth" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td width="50%" align="right" class="full">
<p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
<a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>
</p>
</td>
<td width="50%" align="left" class="full">
<a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>
</td>
</tr>
</table>
CSS
@media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; } T
body[yahoo] .full {
display:block;
width:100%;
}
}
注意：身体[yahoo] selector prevents Yahoo from rendering the media queries.我的电子邮件的body元素有一个yahoo =“fix”属性.
上面的CSS表示,如果屏幕宽度小于640px,则具有full类型的tds应该显示：block,宽度为100％.
现在,让我们来点点心.有时你会希望左边的列堆叠在右边的列.为此,我们可以在包含表上使用dir =“rtl”来翻转列的顺序. CSS保持不变,这里是新的HTML：
HTML
<table class="deviceWidth" dir="rtl" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td width="50%" dir="ltr" align="right" class="full">
<p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
<a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>
</p>
</td>
<td width="50%" dir="ltr" align="left" class="full">
<a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>
</td>
</tr>
</table>
通过添加dir =“rtl”,我们会告诉它颠倒列的顺序.第一列(HTML的流程)正在右侧显示,第二列(在HTML中)显示在左侧.对于小于640px的屏幕,首先显示第一列(右侧的列),第二列(左侧的列)为第二列.
这是full HTML and CSS,附有Gmail和iOS 5的屏幕截图.
