email
Гибридное кодирование электронной почты

Android ASP.NET C# Language CSS HTML Java Language JavaScript PHP Python Language Ruby on Rails

Вступление

Когда почтовый клиент не поддерживает 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>

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow