电子邮件模板 td 不适合移动设备？

Question

当在移动设备上查看电子邮件模板时，我试图将两个 table 单元格堆叠在一起。虽然代码在浏览器中查看电子邮件时有效，但在移动电子邮件客户端中却不起作用？

如何为移动布局制作 table 堆栈？

媒体查询：

@media only screen and (max-width: 600px) {
    *[class=hero-block] {
        width: 100%;
        display: block !important;
        text-align: center;
        clear: both;
    }
}

HTML:

<table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td class="hero-block">
            <img src="hero.jpg" height="265" width="245" />
        </td>
        <td class="hero-block" width="295">
            <table bgcolor="000000" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td align="left">
                        <font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img style="display: block; border:0; margin: 0; padding: 0;" src="x.gif" height="20" width="1" alt="x" />
                    </td>
                </tr>
            </table> 
        </td>
    </tr>
</table>

Answer 1

TD 已经停止在 Android 中堆叠一段时间以保持安静。一种解决方法是改用 TH，它适用于 Android 和 iOS。在测试电子邮件中试用下面的代码：

    @media only screen and (max-width: 600px) {
        *[class=hero-block] th{
            width: 100%;
            display: block !important;
            text-align: center;
            clear: both;
        }
    }

    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="hero-block">
                    <tr>
                        <th align="left" style="font-weight:normal;" bgcolor="#000000">
                            <font color="#ffffff" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font>
                        </th>
                        <th align="left" style="font-weight:normal;" bgcolor="#ffffff">
                            <font color="#000000" face="Arial,Verdana,sans-serif" size="1" style="font-size: 22px; line-height: 22px;">Thanks for signing up</font>
                        </th>
                    </tr>
                </table>

使用此代码时，请确保正常使用字体粗细，否则块内的文本将变为粗体。

干杯

电子邮件模板 td 不适合移动设备？

Email template td not stacking for mobile?

html

email

html-table

html-email

media-queries