email
Hybrid-E-Mail-Codierung
Suche…
Einführung
Wenn ein E-Mail-Client keine media-queries unterstützt, kann ein hybrider Ansatz verwendet werden, um das Layout für unterschiedliche Bildschirmgrößen für E-Mail-Clients unabhängig von der Unterstützung für Medienabfragen neu zu konfigurieren. Es verwendet flüssige Tabellen und max-width und min-width, um starre Basislinien (die etwas Bewegung zulassen) durchzusetzen, und erzwingt eine feste Breite für Outlook, die ohnehin an den Desktop gefesselt ist. Sobald eine mobilfreundliche Basis festgelegt ist, verbessern Medienabfragen die E-Mail in den Clients, die sie unterstützen, schrittweise.
Einzelspalte, flüssiges Layout
Der Grundaufbau der Hybridcodierung ist eine einzelne Fluidsäule. Da die meisten E-Mail-Clients max-width , können Sie die max-width der <table> auf 100% (Flüssigkeit) setzen, aber nicht die maximale Breite (in diesem Fall 660px ) überschreiten. Genau wie im Web.
Windows Desktop Microsoft unterstützt jedoch max-width und würde diese Tabelle mit 100% Breite 660px . 660px wir bedingte Tags von Microsoft, um " Ghost Tables " einzurichten, die der <table> eine harte Breite von 660px . Windows Desktop Microsoft ist nur für den Desktop vorgesehen und muss daher bei kleinen Größen nicht flüssig sein. Da Microsoft Windows Desktop der einzige E-Mail-Client ist, der diese bedingten Tags von Microsoft unterstützt, wird kein anderer Client versehentlich auf eine Desktopbreite von 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>