Является ли это наилучшим способом достижения эффекта столбца точек останова RWD для почты в формате Outook 2007+/windows 10/all почтовых клиентов?
Я не нашел в Интернете ни одного решения для создания столбцов точек останова RWD (Responsive Web Design) для html-писем, где после торможения два столбца рядом друг с другом в два по центру один под другим, когда экран имеет небольшую ширину, поэтому использование информации в другом месте я должен был попытаться выяснить, как сделать что-то, что работает лучше всего. Ниже приведен код, который работает для действительно старых почтовых клиентов, а также Outlook 2007+ и почтового клиента Windows 10 - остальное можно сделать с помощью стилей и медиазапроса. Точка останова. Конечно, для outlook 2007+ столбец всегда будет иметь фиксированную ширину, но столбцы разрушаются, когда ширина экрана составляет менее 600 пикселей. Это лучшее доступное решение? Моя цель в основном не задавать этот вопрос, а делиться решением проблемы с общественностью. Но я собираюсь задать вопрос в другой теме о вертикальном выравнивании нижеприведенного примера, когда столбцы имеют разную высоту (да, в приведенном ниже коде еще не хватает одной мелочи: столбцы в Outlook 2007+ выровнены по низу, а не по верху линия). Пример двух столбцов с картинками рядом друг с другом (в основном, просто вставьте, пожалуйста, письмо размером> 600px html и отправьте себе):
<!--[if (gte mso 12)|(IE 8)|(IE 9)]><v:rect mso-position-vertical="top" xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" inset="0,0,0,0" style="display:inline-block;width:270px;margin:0;padding;0;mso-position-vertical:top"><v:textbox xmlns:v="urn:schemas-microsoft-com:vml" inset="0,0,0,0" style="mso-fit-shape-to-text: true"><![endif]-->
<div class="rwd_width_100_percent_small_screen" style="display: inline-block;vertical-align:top;width:270px;">
<table class="rwd_width_100_percent_small_screen" cellpadding="0" cellspacing="0" width="270" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;">
<tr>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
<td valign="top" align="center" width="0%"><!--[if gte mso 12]><p style="display: none;"> </p><![endif]--><p style="margin-top: 6px;"><img src="images/describing_image.jpg" alt="" /></p></td><td width="100%" valign="top">
<p align="justify" style="margin-top: 10px;line-height:12px;text-align:justify"><font size="1" color="#005a96" face="Verdana,sans-serif" style="font-size: 10px;line-height:12px;">Some tekst next to a describing image</font></p>
</td>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
</tr>
</table>
</div>
<!--[if (gte mso 12)|(IE 8)|(IE 9)]></v:textbox></v:rect><![endif]-->
<!--[if (gte mso 12)|(IE 8)|(IE 9)]><v:rect mso-position-vertical="top" xmlns:v="urn:schemas-microsoft-com:vml" stroked="false" inset="0,0,0,0" style="display:inline-block;width:270px;margin:0;padding;0;mso-position-vertical:top"><v:textbox xmlns:v="urn:schemas-microsoft-com:vml" inset="0,0,0,0" style="mso-fit-shape-to-text: true"><![endif]-->
<div class="rwd_width_100_percent_small_screen" style="display: inline-block;vertical-align:top;width:270px;">
<table class="rwd_width_100_percent_small_screen" cellpadding="0" cellspacing="0" width="270" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;">
<tr>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
<td valign="top" align="center" width="0%"><!--[if gte mso 12]><p style="display: none;"> </p><![endif]--><p style="margin-top: 6px;"><img src="images/describing_image.jpg" alt="" /></p></td><td width="100%" valign="top">
<p align="justify" style="margin-top: 10px;line-height:12px;text-align:justify"><font size="1" color="#005a96" face="Verdana,sans-serif" style="font-size: 10px;line-height:12px;">Some tekst next to a describing image</font></p>
</td>
<td width="20"><table cellpadding="0" cellspacing="0" width="20" border="0" style="padding:0;border-collapse:collapse; border-spacing: 0px;"><tr><td></td></tr></table></td>
</tr>
</table>
</div>
<!--[if (gte mso 12)|(IE 8)|(IE 9)]></v:textbox></v:rect><![endif]-->
Конечно, вы можете использовать таблицу align="left", две получают две таблицы рядом друг с другом, но после brakipoint они расположены одна под другой, но выровнены по левому краю, а не по центру - так что то, что выше, работает лучше всего сейчас для меня. Позвольте мне напомнить вопрос. Является ли приведенный выше пример лучшим RWD-решением для HTML-писем?