email
Гибридное кодирование электронной почты
Поиск…
Вступление
Когда почтовый клиент не поддерживает media-queries
, можно использовать гибридный подход для перенастройки макета для разных размеров экрана для почтовых клиентов независимо от поддержки медиа-запросов. Он использует таблицы текучей среды и максимальную ширину и минимальную ширину, чтобы навязывать жесткие базовые линии (позволяющие некоторое перемещение) и накладывает фиксированную широкую ширину для Outlook, которая в любом случае скопирована на рабочий стол. Как только базовая линия для мобильных устройств будет установлена, медиа-запросы постепенно улучшают электронную почту далее в поддерживающих ее клиентах.
Отдельная колонка, макет жидкости
Базовая установка гибридного кодирования представляет собой единую жидкостную колонку. Поскольку большинство почтовых клиентов поддерживают max-width
, мы можем использовать это, чтобы установить ширину <table>
на 100% (жидкость), но не превышающую максимальную ширину (в этом случае 660px
). Как в Интернете.
Однако Windows Desktop Microsoft не поддерживает max-width
и будет отображать эту таблицу со 100% шириной, поэтому мы используем условные теги Microsoft для настройки « Таблиц призраков », которые придают <table>
жесткую ширину 660px
. Windows Desktop Microsoft - только для настольных компьютеров, поэтому она не должна быть жидкой при небольших размерах. И поскольку Windows Desktop Microsoft является единственным почтовым клиентом, который поддерживает эти условные теги Microsoft, ни один другой клиент не будет непреднамеренно ограничен 660px
настольного компьютера 660px
.
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="">
<tr>
<td align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
<tr>
<td align="center" valign="top" width="660">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
<tr>
<td align="center" valign="top">
<p>Content Goes Here.</p>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>