Я создал шаблон электронной почты, в котором используется макет из двух столбцов. Это был мой подход:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>
На десктопе работает отлично! У меня есть макет с двумя столбцами именно так, как я хотел. Проблема в телефонах, потому что экраны слишком малы для двухколоночного макета. Мне нужно одно изображение в строке, а не два, для мобильных устройств. Что я мог бы сделать, так это использовать float:left;width:100% для элементов <td>, содержащих изображения, чтобы у меня был один макет столбца, который мне нужен. Однако этот float:left;width:100% должен применяться только тогда, когда, например, @media screen and (max-width:450px). Но нет возможности использовать @media screen and (max-width:450px) с помощью встроенного CSS. Помните, что это для шаблона электронной почты. Поэтому я не могу вызывать внешние файлы CSS или добавлять CSS в <head> страницы, потому что это код, который будет отправлен для шаблона электронной почты.
Я нашел на https://kb.benchmarkemail.com/using-css-in-html-emails/ этот совет, но это не решение для адаптивных таблиц:
Список задач
Используйте таблицы для оформления. Таблицы поддерживаются более последовательно. Мы рекомендуем размещать код CSS прямо в вашем контенте. Это должно выглядеть примерно так: Ваше содержимое здесь.... Объявите ширину, отступы и интервалы между ячейками для всех таблиц и ячеек таблицы. Это приведет к фиксированной ширине шаблона. Используйте атрибуты тегов hspace и vspace, чтобы добавить пробелы вокруг изображения. Встроенные стили полей и отступов поддерживаются большинством, но не всеми почтовыми клиентами.
Любые идеи? Спасибо.
<style>находится внутри<head>. Проблема в том, что шаблон электронной почты, который я пишу, отправляет только<table>, предполагая, что он пойдет прямо к<body>электронной почты. Я ничего не вставляю в<head>. Должен ли мой шаблон электронной почты быть<html><head></head><body><table>..........</table></body></html>, а не только<table>..........</table>, который я отправляю? - person Jaime Montoya schedule 03.04.2020<head>, просто добавьте его к элементу<style>перед<table›. (modarn) Браузеры автоматически отображают правильное дерево. - person A. Meshu schedule 03.04.2020<table>..........</table>мне нужно просто<style>..........</style><table>..........</table>и все? - person Jaime Montoya schedule 03.04.2020<style>.class and/or #id elements for responsive table</style><table>My table invokes the corresponding id or class properties that I defined in the <style> area...</table>. Это правильно? - person Jaime Montoya schedule 03.04.2020style.!importantне работает все время. то есть, если вы установите:#demo {width: 100px;}изstyle, а затем используете встроенный стиль, то есть:<div id="demo" style="width: 150px;">этот элемент, вероятно, будет занимать 150 пикселей. - person A. Meshu schedule 03.04.2020<style>.....</style><table>.....</table>работает, то весь мой CSS будет в<style>.....</style>, а в<table>.....</table>я буду вызывать только CSS, написанный на<style>.....</style>, а не писать встроенный CSS вообще, если на самом деле стили могут быть написаны на<style>.....</style>, как вы предложили. Не могли бы вы подтвердить это? - person Jaime Montoya schedule 03.04.2020<style> @media screen and (max-width:450px) { .responsive { float:left!important; width:100%!important } } </style><table><tr><td class="responsive">.........</td></tr>.........</table>. Но это не работает. Я на 100% уверен, что мой CSS хорош, потому что, когда я использую встроенный код CSSfloat:left!important;width:100%!important, мой адаптивный дизайн работает. Так что это просто<style></style>, который не распознается. Работает ли это для вас? Вы были на 99% уверены, что это будет работать в приложении Gmail. Я использую приложение Gmail. Как заставить это работать? - person Jaime Montoya schedule 03.04.2020<html><head><style type="text/css">..........</style></head><body>...........</body></html>, как я уже упоминал в своем ответе на свой вопрос. Только<style> @media screen and (max-width:450px) { .responsive { float:left!important; width:100%!important } } </style><table><tr><td class="responsive">.........</td></tr>.........</table>в моем случае не сработало. Мне пришлось начать с<html>и добавить<styles>в элемент<head>, как это обычно делается в любом HTML-документе. Спасибо, что помогли мне разобраться в этом! - person Jaime Montoya schedule 03.04.2020