没有媒体查询的响应式电子邮件 HTML答案

【问题标题】：Responsive email HTML without media queries没有媒体查询的响应式电子邮件 HTML
【发布时间】：2016-01-04 21:11:47
【问题描述】：

Gmail 不支持媒体查询 CSS 规则，所以我使用内联 CSS 创建了 HTML 电子邮件，现在我被困在桌面视图中。我也不能使用 float:left，因为 hotmail 会将其从电子邮件正文中删除，并且也不使用媒体查询。

我的要求附在截图中

我当前的代码是

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;">
<tr>
    <td>
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td valign=top width="70%" style="min-width: 320px; display: inline-block; background-color: yellow;height:auto; height:200px;">
                    Main Content
                </td>
                <td valign=top width="29%" style="min-width: 150px; max-width:320px; display: inline-block; ">
                    <!-- SIDE BAR CONTENT -->
                    <table align=left cellspacing="0" cellpadding="0" border="0" style="background-color: blue; width: 100px;">
                        <tr>
                            <td width="*" style="max-width: 110px; background-color: red;  height:100px;">
                                MY PHOTO
                            </td>
                        </tr>
                    </table>
                    <table align=left width="*" cellspacing="0" cellpadding="0" border="0" style="background-color: green; width: 220px;">
                        <tr>
                            <td width="*" style="max-width: 110px; background-color: green;  height:100px;">
                                MY STATS TEXT
                            </td>
                        </tr>
                    </table>
                    <!-- SIDE BAR CONTENT END -->
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

【问题讨论】：

我可以使用flexbox 做一些与此类似的事情，但无法弄清楚如何制作嵌套的 flex-box 包装，以便在主区域旁边时右列具有垂直堆叠但是当它低于它时是水平的。我怀疑我做错了什么都是愚蠢的，所以希望这至少会有所帮助。

标签： html responsive-design html-email

【解决方案1】：

您可以尝试将两个“浮动”中的每一个都包含在内联块 div 中，但在桌面视图中不可能有两个堆叠块，以便在没有媒体查询的移动视图中让它们彼此相邻。

最好的解决方案是使用媒体查询并为 Gmail 提供后备布局（例如使用内联块 div）。

使用内联块 div 的演示：

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="max-width:600px;">
<tr>
    <td>
        <div style="width: 380px; display: inline-block;">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td valign=top width="70%" style="min-width: 320px; display: inline-block; background-color: yellow;height:auto; height:200px;">
                        Main Content
                    </td>
                </tr>
            </table>
        </div>
        <div style="width: 220px; display: inline-block;">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td valign=top width="29%" style="min-width: 150px; max-width:320px; display: inline-block; ">
                        <!-- SIDE BAR CONTENT -->
                        <table align=left cellspacing="0" cellpadding="0" border="0" style="background-color: blue; width: 100px;">
                            <tr>
                                <td width="*" style="max-width: 110px; background-color: red;  height:100px;">
                                    MY PHOTO
                                </td>
                            </tr>
                        </table>
                        <table align=left width="*" cellspacing="0" cellpadding="0" border="0" style="background-color: green; width: 220px;">
                            <tr>
                                <td width="*" style="max-width: 110px; background-color: green;  height:100px;">
                                    MY STATS TEXT
                                </td>
                            </tr>
                        </table>
                        <!-- SIDE BAR CONTENT END -->
                    </td>
                </tr>
            </table>
    </td>
</tr>
</table>

有关设计响应式电子邮件 HTML 的更多信息：https://www.campaignmonitor.com/blog/email-marketing/2014/07/creating-a-centred-responsive-design-without-media-queries/

【讨论】：