Как сделать таблицу HTML отзывчивой для шаблона электронной почты при использовании внешнего файла CSS - это невозможно - PullRequest
Новая
       112

Как сделать таблицу HTML отзывчивой для шаблона электронной почты при использовании внешнего файла CSS - это невозможно

0 голосов
/ 03 апреля 2020

Я создал шаблон электронной почты, который использует макет из двух столбцов. Это был мой подход: 

<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), используя inline CSS. Помните, это для шаблона электронной почты. Поэтому я не могу вызвать внешние CSS файлы или добавить CSS к <head> страницы, потому что это код, который будет отправлен для шаблона электронной почты.

Я нашел на https://kb.benchmarkemail.com/using-css-in-html-emails/ этот совет, но это не решение для отзывчивых таблиц:

Что нужно сделать

Использовать таблицы для разметки. Таблицы более последовательно поддерживаются. Мы рекомендуем вам разместить свой код CSS в строке вашего контента. Это должно выглядеть примерно так: Ваш контент здесь .... Объявите ширину, ячейку и пространство ячеек для всех таблиц и ячеек таблицы. Это приведет к фиксированной ширине шаблона. Используйте атрибуты тегов hspace и vspace, чтобы добавить пробел вокруг изображения. Встроенные стили полей и отступов поддерживаются большинством, но не всеми почтовыми клиентами

Есть идеи? Спасибо.

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Google предлагает CSS поддержку: https://developers.google.com/gmail/design/css, как указал А. Мешу в своих комментариях к моему вопросу.

Я нашел на https://templates.mailchimp.com/development/responsive-email/ что они говорят это:

"Вы можете оставить стили медиазапроса в <head> вашей электронной почты, поскольку клиенты, поддерживающие медиазапросы, не удаляют <head> или <style> областей. "

Это заставило меня подумать, что я должен был отправить полный документ <HTML>, поэтому я даже включил <html><head><style type="text/css">..........</style></head><body>...........</body></html>.

Для других своих шаблонов электронной почты я просто отправляю код за <body>. Я запускаю шаблон с <div> и все работает. Но для этого шаблона сейчас я использую эту структуру: 

<html>
<head>
<style type="text/css">
@media screen and (max-width:450px) {
    .responsive {
        float:left!important;
        width:100%!important
    }
}
</style>
</head>
<body>
..........
</body>
</html>

Спасибо А. Мешу за то, что он дал очень важные подсказки в своих комментариях к моему вопросу, чтобы понять это.

0 голосов
/ 03 апреля 2020

Поскольку элементы table имеют блочный уровень, я бы сказал, что нужно изменить эти td s на вложенные table s, как будто это 1999 год, а затем float первый слева: 

<table>
    <tr>
      <td colspan="2" align="center">
          <h1>Header of my email template</h1>
      </td>
    </tr>
    <tr>
        <td>
            <table style="float:left;">
                <tr>
                    <td>
                        <img src="image1.jpg" alt="Image 1" />
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                    <img src="image2.jpg" alt="Image 2" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
          <p>Footer of my email template</p>
      </td>
    </tr>
</table>
...