html - 无需媒体查询的响应式电子邮件 HTML

Question

Gmail 不支持媒体查询 CSS 规则，因此我使用内联 CSS 创建了 HTML 电子邮件，但现在我陷入了桌面 View 。我也不能使用 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>

Answer 1

您可以尝试将两个“ float ”中的每一个都包含在内联 block div 中，但是在桌面 View 中不可能有两个堆叠 block ，以便在没有媒体查询的情况下在移动 View 中将它们彼此相邻。

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

使用内联 block 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/