email
Codificación de correo electrónico híbrido
Buscar..
Introducción
Cuando un cliente de correo electrónico no admite media-queries , se puede utilizar un enfoque híbrido para reconfigurar el diseño para diferentes tamaños de pantalla para clientes de correo electrónico, independientemente del soporte de consultas de medios. Utiliza tablas fluidas y ancho máximo y ancho mínimo para imponer líneas de base rígidas (lo que permite un cierto movimiento) e impone un ancho fijo y ancho para Outlook que está encadenado al escritorio de todos modos. Una vez que se establece una línea de base para dispositivos móviles, las consultas de medios mejoran progresivamente el correo electrónico en los clientes que lo admiten.
Columna única, diseño fluido
La configuración básica de la codificación híbrida es una columna única y fluida. Como la mayoría de los clientes de correo electrónico admiten max-width , podemos usar eso para establecer el ancho de la <table> en 100% (fluido), pero no exceder el ancho máximo ( 660px en este caso). Al igual que en la web.
Sin embargo, Windows Desktop Microsoft no admite max-width y representaría esta tabla al 100% del ancho, por lo que usamos etiquetas condicionales de Microsoft para configurar las " Tablas fantasma " que dan a la <table> una anchura fuerte de 660px . Windows Desktop Microsoft es solo para escritorio, por lo que no es necesario que sea fluido en tamaños pequeños. Y dado que Windows Desktop Microsoft es el único cliente de correo electrónico que admite estas etiquetas condicionales de Microsoft, ningún otro cliente se verá limitado inadvertidamente a un ancho de escritorio de 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>