Я настраиваю новую подпись электронной почты для своего клиента, которая должна быть отзывчивой.
Я попробовал один макет, который включает в себя div, таблицы и т. д., который хорошо работает на настольных компьютерах, но не на мобильных устройствах.
Ниже приведен один такой пример, но электронное письмо выглядит так же, как и для настольных компьютеров, и для мобильных устройств, а ячейки/разделы смещаются друг под друга.
В рамках моего исследования я попытался использовать этот шаблон электронной почты, который закончился тем же самым. - https://github.com/seanpowell/Email-Boilerplate
<!--[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>Administrator</strong><br>Phone {qwfqwfcqwdqwfqfgqwfqwbfjqnwjkfqnwjfbqiwnf qwnfiquwnqwnfiqnwifjnqwfinqwifnqwjinfqjiwnfijqwnf}<br>Email <a href="mailto:{E-mail}" style="color: #fff; text-decoration: none;">{qwfqwfqwcqwfqwfqwfdqwcrqwrqwcrqwrqwrcqwrxqwrqwcxqrwqxrqwxqwx}</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>qwfqwfqwdqw fqwfqwfqwdfqwdqwfqwfqwdqwdqwdqw</strong>
</div>
<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
https://jsfiddle.net/623y57p1/1/
Посмотрите на демо, которое я сделал. Это отзывчиво в браузерах, но не в Outlook.
