Question

尝试对响应式电子邮件模板进行编码，而GMail应用程序一直让我陷入困境。

我有一个3列的图像，我想在另一个上面显示一个（align =＆＃34; center＆＃34;）。然而出于某种原因，当它通过gmail应用程序时，对齐变得古怪（两个左对齐，一些填充，一个右对齐）。

修复建议？

看起来像这样：！（https://drive.google.com/file/d/0B26Uw_LjUlM-LWNfWnZkR3VvVEU）。

下面是代码：

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="wrap" style="border-collapse: collapse;background-color: #ffffff;">
                            <tr>
                                <td height="20">
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td class="padding2" style="padding: 0 20px;">
                                    <table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td> <img mc:edit="bottom-ad1" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="10" align="left" border="0" cellpadding="0" cellspacing="0" class="hide600" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td height="10">
                                                <br />
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td> <img mc:edit="bottom-ad2" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="180" align="right" border="0" cellpadding="0" cellspacing="0" class="color-icon-s mid3" style="border-collapse: collapse;border: none;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                                        <tr>
                                            <td> <img mc:edit="bottom-ad3" src="https://gallery.mailchimp.com/78524444e0a13e2b163d98bed/images/0cf0b81b-2194-4781-ae2e-5d2a55620756.jpg" width="180" style="width:180px; max-width: 180px;" alt="" />
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td height="20">
                                    <br />
                                </td>
                            </tr>
                        </table>

CSS：

@media only screen and (max-width: 599px) {
            table[class~=button][class~=b], table[class~=color-icon-s], table[class~=color-icon-m] { width:240px !important; max-width:240px !important; height:auto;}
            table[class~=color-icon-m], table[class~=color-icon-b], table[class~=color-icon-s] { float:none !important; margin:0 auto !important; }
            table[class~=mid3] { margin-bottom:30px !important; }
            td[class~=mid3] { margin-bottom:30px !important; }
            table[class~=hide600], td[class~=hide600] { display:none !important; }
}
@media only screen and (max-width: 439px) {
            td[class~=padding-2-440] { padding:0 20px !important; }
}
@media only screen and (max-width: 339px) {
            table[class~=wrap], table[class~=version] { width:100% !important; }
            }

Answer 1

Gmail App不支持媒体查询（来源：https://litmus.com/help/email-clients/media-query-support/）。因此，任何未内联的CSS都不会被渲染。

也就是说，Gmail应用程序应该缩放视图以适应屏幕。我会在你的代码中更改两件事。

避免为图像设置固定宽度。做<img src="path/here/" style="width:100%;max-width:180px" width="180" />之类的事情。
设置包含图片的<td>的宽度百分比。您可以尝试<td style="width:33.3333%;">。

我希望这会有所帮助。

Answer 2

您必须将两个表格对齐更改为align =“center”。这将导致表在所有客户端中居中。然后在head部分的媒体查询中使用浮点数类“left”和“right”，如下所示：

.left { float: left !important; } .right { float: right !important; }

由于gmail应用程序剥离了头部中的样式，因此这个css在gmail中不起作用，它们将保持居中。那么你将使用Outlook不支持浮点数的对齐=居中问题。要再次右/左对齐，只需为Outlook之前和之后添加条件标记，如下所示：

// your markup here: <table width="49%" align="center" ...

为条件中的两个表设置左右对齐值，然后将其置于gmail应用程序的中心位置，并在Outlook中为左/右。

干杯

GMail App中的响应式图像对齐

2 个答案: