Как добавить адаптивную ширину для новостной рассылки по электронной почте?

Как добавить width в таблицу моего информационного бюллетеня, чтобы она реагировала на все почтовые клиенты?

А

style="width: 100%"

Б

style="width: 300px"

С

 width="300"

Д

 width="300px"

Е

 width="100%"

html responsive-design email email-client html-email
person Borja    schedule 31.05.2016    source источник
comment
Вам нужна ширина 100% или 300 пикселей?   -  person Ali Sheikhpour    schedule 01.06.2016
comment
@AliSheikhpour я читал, что 100%, возможно, были проблемы ... Так что, если это не так, лучше иметь 100%, но если это проблема, я буду использовать 300px   -  person Borja    schedule 01.06.2016
comment
Имейте в виду, что это не обязательно должен быть адаптивный дизайн, чтобы быть удобным для мобильного почтового клиента, но независимо от того, A будет моим выбором.   -  person Henry    schedule 01.06.2016

Ответы (2)


arrow_upward
2
arrow_downward

Чтобы охватить ВСЕ почтовые клиенты, включая Outlook для ПК и Gmail для мобильных устройств, вам нужен гибридный/гибкий подход:

<div style="max-width: 300px;">
  <!--[if (gte mso 9)|(IE)]>
    <table cellspacing="0" cellpadding="0" border="0" width="300"><tr><td>
  <![endif]-->
  <table cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 300px;">
    /* email code */
  </table>
  <!--[if (gte mso 9)|(IE)]>
    </td></tr></table>
  <![endif]-->
</div>

По своей сути, он использует max-width и min-width для установления жестких базовых линий (допуская некоторое движение) и налагая фиксированную широкую ширину для Outlook, который так или иначе прикован к рабочему столу. Как только базовый уровень для мобильных устройств установлен, медиа-запросы постепенно улучшают электронную почту в клиентах, которые его поддерживают.

Это довольно многословно и, по сути, требует двух наборов разметки (один для настольного Outlook и один для всех остальных), но этот подход обеспечит вам полное покрытие в основных почтовых клиентах.

Этот шаблон показывает базовую версию этого кода в действии.

person Ted Goas    schedule 01.06.2016

arrow_upward
0
arrow_downward

  1. используйте атрибут style вместо атрибута width, так как он устарел в HTML5

  2. Я предлагаю 100% ширину и максимальную ширину вместе по стилю, потому что неудобно находить следующую строку на экране шириной более 960 пикселей.

    <div style="width:100%;max-width:960px;">your content here</div>
person Ali Sheikhpour    schedule 31.05.2016
comment
хм... И вы говорите, что это работает для всех почтовых клиентов? (Также, если добавлено в тег таблицы) - person Borja; 01.06.2016
comment
К сожалению, это не будет работать в Outlook для настольных ПК, поскольку он не поддерживает max-width. - person Ted Goas; 01.06.2016