Как сделать вложенные таблицы с адаптивным дизайном совместимыми с Gmail - PullRequest
Новая
       5

Как сделать вложенные таблицы с адаптивным дизайном совместимыми с Gmail

0 голосов
/ 15 февраля 2019

В настоящее время я работаю над почтовой кампанией, которая появляется и работает на всех устройствах, которые я тестировал до сих пор, КРОМЕ Gmail.Я хочу, чтобы ячейки таблицы разваливались на блоки после уменьшения размера экрана, но пока Gmail распознает все объявления CSS до медиа-запроса, он не распознает объявления в медиа-запросе и не позволяет электронной почте реагировать на изменения.Это самая важная декларация, которую я пытаюсь заставить работать. 

@media screen and (max-width: 480px){table, thead, tbody, th, td { 
    width: 100% !important;
    display:block !important;
}

Вот ссылка на электронное письмо, которое появляется и функционирует именно так, как я хочу: https://www.spectrumemp.com/archives/email/d3ded4a4-3095-11e9-820b-22000ab3b6d0. Любые предложения какк тому, что проблема или решение могут быть с благодарностью.

1 Ответ

0 голосов
/ 15 февраля 2019

Gmail и несколько других почтовых клиентов удаляют теги из HTML.Вот почему лучше встроить как можно больше из вас в CSS.Это особенно верно, когда речь идет о строках и столбцах.

Лучший способ обеспечить совместимость между клиентами - использовать встроенный инструмент, такой как Zurb .Прелесть этого в том, что он даст вам 100% отзывчивые шаблоны электронной почты и будет совместим с разными клиентами.Это также позволит вам выполнять большую часть фактически кодирования в SASS, что ускорит производство.

...