email
Hybrid e-postkodning
Sök…
Introduktion
När en e-postklient inte stöder media-queries kan en hybridmetod användas för att rekonfigurera layouten för olika skärmstorlekar för e-postklienter oavsett support för mediafrågor. Den använder vätsketabeller och max-bredd och min-bredd för att införa styva baslinjer (vilket möjliggör en viss rörelse) och sätter en fast, bred bredd för Outlook som ändå är bockad till skrivbordet. När en mobilvänlig baslinje har ställts in förbättras mediefrågor gradvis e-postmeddelandet ytterligare hos kunder som stöder det.
Enkel kolumn, flytande layout
Den grundläggande inställningen av hybridkodning är en enda, flytande kolonn. Eftersom de flesta e-postklienter stöder max-width kan vi använda det för att ställa in <table> bredden till 100% (fluid), men inte överskrida en 660px ( 660px i detta fall). Precis som på webben.
Windows Desktop Microsoft stöder dock inte max-width och skulle göra den här tabellen med 100% bredd, så vi använder Microsoft villkorade taggar för att ställa in " Ghost Tables " som ger <table> en hård bredd på 660px . Windows Desktop Microsoft är endast skrivbord, så det behöver inte vara flytande i små storlekar. Och eftersom Windows Desktop Microsoft är den enda e-postklienten som stöder dessa Microsoft villkorade taggar kommer ingen annan klient av misstag att begränsas till en skrivbordsbredd på 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>