16

这篇精彩的文章描述了如何创建可以惊人地扩展到移动浏览器的响应式表格。

现在我正在尝试将相同的技术应用于 html 电子邮件，但display:block似乎不适用于 html 电子邮件。

要重现该问题：

  1. 将以下代码另存为 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->Mail此页面的内容创建 HTML 电子邮件

  5. 调整电子邮件窗口的大小以注意表格如何正确调整大小

  6. 将电子邮件发送给自己并打开它。

  7. 现在请注意电子邮件确实如何响应媒体查询但未成功地重新设置表格的样式。

我还没有找到真正正确显示表格的电子邮件客户端。这是一个死胡同还是你有解决方法的想法？

4

6 回答 6

16

接受的答案提供了一些很好的信息，但它没有直接解决这个问题。我最近一直在尝试响应式电子邮件，并提出了一些其他人可能会觉得有用的好的解决方案。开始了...

要回答这个问题，您可以使用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%;
    }
}

注意：选择body[yahoo]器阻止 Yahoo 呈现媒体查询。我的body电子邮件元素有一个yahoo="fix"属性。

上面的 CSS 表示如果屏幕宽度小于 640 像素，那么tds 的 class 为fullshould display:blockwith width:100%。

现在，让我们来点花哨的。有时您会希望左侧的列堆叠在右侧的列下方。为此，我们可以使用dir="rtl"包含table来翻转列的顺序。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 中）在左侧。对于小于 640 像素的屏幕，它首先显示第一列（右侧的列），然后显示第二列（左侧的列）。

这是完整的 HTML 和 CSS以及来自 Gmail 和 iOS 5 的屏幕截图。

邮箱 iOS 5 安卓 4

于 2013-08-31T06:10:35.887 回答
2

我能够让它工作，结果如下： https ://litmus.com/pub/d9ac198

这是我用来强制 td 表现得像行的代码：

table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
    display: block !important;
    width: 100%;
}
于 2013-02-21T20:14:34.523 回答
2

我建议你参考这个： http: //www.campaignmonitor.com/css/

虽然不是最新的，但在电子邮件的 css 支持方面，它是一个很好的资源。不幸的是，在构建电子邮件模板时，您不仅需要考虑浏览器，而且还需要考虑不同的客户端，例如 Outlook 和它们提供的 CSS 支持是出了名的差。

最重要的是，像 gmail 这样的邮件提供商倾向于剥离文档的某些部分（例如 head 标签），因此很难将任何响应式设计概念应用到对即使是基本的支持也很差的受众（电子邮件客户端） css。

于 2012-06-01T14:03:05.840 回答
1

另一种方法是在一封电子邮件中使用两种设计：一种用于桌面阅读器，另一种用于移动阅读器，如此处所示。

于 2015-04-01T13:53:58.053 回答
0

我发现使用媒体查询为这样的移动设备堆叠 td 元素

td[class="stack-content"] {display:block !important}

似乎适用于大多数设备，但显然不支持 display: block 属性的 windows phone 7 除外。

于 2013-08-05T08:36:43.803 回答
0

我有完全相同的问题！我认为它只会在 iOS 设备上的 Mail 上运行，但它确实发生了你所说的 - 在你真正发送它之前它一直有效。

@Luca，我们知道支持不是很好，但是媒体查询被大多数人忽略了，所以如果您希望电子邮件在现代电子邮件客户端上看起来更好一点，添加它是一个不错的选择。Outlook 和其他人仍然会收到“正常”的 HTML 电子邮件，但没有媒体查询/响应表。

于 2012-11-07T16:28:13.830 回答