响应式邮件签名 - 编程之家

如何解决响应式邮件签名

我一直在尝试制作响应式邮件签名。这是我的代码。

<!-- --><!-- 1. Google Fonts Code --><!-- 2. Dotty Cell Borders -->
<p style="border-bottom: 1px solid #000; color: -internal-quirk-inherit;">&nbsp;</p>
<table class="table" style="background-color: #ffffff; font-family: lato; text-align: left; color: #000000; font-size: 14px;">
<tbody>
<tr style="height: 1px;">
<th class="table__heading" style="width: 100px; padding-right: 20px; padding-left: 20px; text-align: center;" rowspan="4">
<p><a href="www.jemiol.com"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/logo.png" width="90px" /></a></p>
<p><a href="https://www.facebook.com/LukaszJemiol"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/FACEBOOK.png" width="25px" /></a>&nbsp;<a href="https://www.instagram.com/lukaszjemiol/"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/INSTAGRAM.png" width="25px" /></a>&nbsp;<a href="https://pl.linkedin.com/company/lukaszjemiol"><img src="http://serwer1528495.home.pl/jemiol/SIGNATURE/LINKEDIN.png" width="25px" /></a></p>
</th>
<td class="table__content" style="font-weight: bold;" colspan="4">damIAN DĄbroWSKI</td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4">ADMINISTRATOR STRONY INTERNetoWEJ</td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4"><a style="color: #000000; text-decoration: none;" href="tel:-">-</a></td>
</tr>
<tr style="height: 1px;">
<td class="table__content" colspan="4"><a style="color: #000000; text-decoration: none;" href="mailto:-">-</a></td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid #000; color: -internal-quirk-inherit;">&nbsp;</p>

我找到了一个如何使第二列具有响应性的示例，但我花了几个小时研究它却无法将其应用于我的签名...

这是这个例子：

<!--[if gte mso 9]>
    <table cellspacing=0><tr><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: orange; width: 250px; height: 100px; padding: 3px; vertical-align: top">
            <strong>{display name}</strong><br>Phone {Phone}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{E-mail}</a>
</div>
<!--[if gte mso 9]>
    </td><td style="font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
<![endif]-->
<div style="float: left; font-family: Arial; font-size: 10pt; color: #fff; background-color: red; width: 250px; height: 100px; padding: 3px; vertical-align: top">
            <strong>Company.com</strong>
</div>
<span style="clear: both;"></span>
<!--[if gte mso 9]>    
</td></tr></table>
<![endif]-->

有人可以告诉我如何使它正确吗？

解决方法

建议在对邮件进行 HTML 布局时使用表格。除了表格之外，不同的电子邮件阅读器实际上几乎不兼容。

我会用一个两列的表格来实现你想要的，因为浮动是不是所有读者都能理解的属性之一

类似的东西

<table>
    <tr>
        <td>
            <strong>{Display name}</strong><br>Phone {Phone}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{E-mail}</a>
        </td>
        <td>
            <strong>Company.com</strong>
       </td>
    </tr>
</table>