在移动设备上为 Gmail 堆叠电子邮件答案

【问题标题】：Stack Email for Gmail on mobile在移动设备上为 Gmail 堆叠电子邮件
【发布时间】：2016-08-17 16:40:43
【问题描述】：

移动版 Gmail 无法识别我的媒体查询。

有没有人可以解决这个问题？我希望我的单元格堆叠起来，它在 Mail iOS、Outlook iOS 上都可以正常工作，但在 Gmail 上却不行......

感谢您的建议！

【问题讨论】：

标签： email stack gmail media-queries html-email

【解决方案1】：

Gmail 不支持媒体查询（或 <style> 标记），因此为了让表格单元格堆叠在较窄的宽度上，您必须编写混合电子邮件。

These patterns by Fabio Carniero 在实践中证明了这一原则。我强烈建议您查看这些脚手架，因为它们在移动 Gmail 以及其他不支持媒体查询的电子邮件客户端中实现了列堆叠。

这是一个不使用媒体查询（改编自 Fabio 的文件）的 2 列布局示例：

<!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] -->
<tr>
    <td align="center" height="100%" valign="top" width="100%">
        <!--[if mso]>
        <table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
        <tr>
        <td align="center" valign="top" width="660">
        <![endif]-->
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
            <tr>
                <td align="center" valign="top" style="font-size:0;">
                    <!--[if mso]>
                    <table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
                    <tr>
                    <td align="left" valign="top" width="330">
                    <![endif]-->
                    <div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
                            <tr>
                                <td align="center" valign="top">
                                    LEFT
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso]>
                    </td>
                    <td align="left" valign="top" width="330">
                    <![endif]-->
                    <div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
                            <tr>
                                <td align="center" valign="top">
                                    RIGHT
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </td>
            </tr>
        </table>
        <!--[if mso]>
        </td>
        </tr>
        </table>
        <![endif]-->
    </td>
</tr>
<!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // -->

【讨论】：