Встроенный CSS, решение @media tag для шаблона электронной почты

Question

Для шаблона электронной почты я хочу вывод, подобный этому На широкоформатном экране

, но на маленьком экране как мобильный или@media (max-width: 768px) Я хочу вывод, подобный этому

для достижения этого во внутреннем CSS Я использовал bootstrap

<div class="col-xs-6 col-sm-4">
    <img src="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png" alt="img1" class="img-thumbnail" />
</div>

, но я хочу сделать это с помощью встроенного CSSреальная проблема заключается в том, как я могу использовать стили col-xs-6 и col-sm-4 в одном теге?

---

с внутренним CSS и с встроенным CSS

PS: теги @media не допускаются во встроенном CSS.Это шаблон электронной почты, поэтому использование встроенного CSS необходимо.

Answer 1

Это решение основано на CSS. JavaScript не будет работать в электронной почте, так как он отключается и отключается большинством почтовых клиентов.

Этот ответ основан на использовании шаблона электронной почты, Cerberus. Хотя вы могли бы использовать его в любом адаптивном современном шаблоне электронной почты, я полагаю.

Вам понадобятся несколько классов таблиц стилей в запросе @media, таблица для работы в качестве контейнера, а затем таблица из трех столбцов.

Таблица стилей:

<style>
@media screen and (max-width: 600px) {
    .email-container {
        width: 100% !important;
        margin: auto !important;
    }
    .stack-column-center {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        direction: ltr !important;
        float: left !important;
    }
    .stack-column-center-50 {
        width: 50% !important;
        max-width: 50% !important;
        direction: ltr !important;
        display: inline-block;
    }
}
</style>

HTML код:

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: 0 auto;" class="email-container">
  <tr>
    <td valign="top" style="padding: 10px; background-color: #ffffff;">
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="outline: 1px solid #f00;">
            <tr>
                <!-- Column : BEGIN -->
                <td width="33.33%" class="stack-column-center-50">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td style="padding: 10px; text-align: center">
                                <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                            </td>
                        </tr>
                        <tr>
                            <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
                                <p style="margin: 0;"><strong>Column 1</strong><br />Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- Column : END -->
                <!-- Column : BEGIN -->
                <td width="33.33%" class="stack-column-center-50">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td style="padding: 10px; text-align: center">
                                <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                            </td>
                        </tr>
                        <tr>
                            <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
                                <p style="margin: 0;"><strong>Column 2</strong><br />Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- Column : END -->
                <!-- Column : BEGIN -->
                <td width="33.33%" class="stack-column-center">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td style="padding: 10px; text-align: center">
                                <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                            </td>
                        </tr>
                        <tr>
                            <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
                                <p style="margin: 0;"><strong>Column 3</strong><br />Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- Column : END -->
            </tr>
        </table>
    </td>
  </tr>
</table>

Я протестировал это в Litmus, и оно работает в каждом почтовом клиенте в стиле рабочего стола и в мобильных клиентах, которые поддерживают запросы @media. Если вы загружаете Cerberus, все, что вам нужно сделать, это сделать два изменения, добавить класс .stack-column-center-50, скопировать таблицу и вставить ее в таблицу тела письма. Кроме добавления столбцов 1, 2, 3 в таблицы, я не внес никаких других изменений.

Шаблон Цербера: https://tedgoas.github.io/Cerberus/

Редактировать : Вы можете объединить значения col-xs-6 и col-sm-4 в новый тег для col-xs-6 с разрешением 600 пикселей. Или создайте новый тег, если вы хотите сохранить работу текущих классов. Мой пример все еще будет работать с новыми именами.

Удачи.

Answer 2

Решено с использованием внешнего div минимальной длины и width:33.33333333%; min-width: 92px;display:inline-block на внутренних изображениях.

demo https://jsfiddle.net/70qfn3d8/4/

<div style="min-width: 190px;">
     <div style="text-align:center">
          <img style= "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width: 170px !important; border:1px solid #ddd;vertical-align:middle;display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;min-height:1px;padding-right:10px;padding-left:10px;width:33.33333333%; min-width: 92px;display:inline-block" src ="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png">
          <img style= "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width: 170px !important; border:1px solid #ddd;vertical-align:middle;display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;min-height:1px;padding-right:10px;padding-left:10px;width:33.33333333%; min-width: 92px;display:inline-block" src ="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png">
          <img style= "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width: 170px !important; border:1px solid #ddd;vertical-align:middle;display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;min-height:1px;padding-right:10px;padding-left:10px;width:33.33333333%; min-width: 92px;display:inline-block" src ="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png">
     </div>
</div>

Answer 3

Использовать отображение: встроенный блок внутри выравнивания текста: по центру

<div style="text-align:center">
     <img style= "width:100px;display:inline-block" >
    <img style= "width:100px;display:inline-block">
    <img style= "width:100px;display:inline-block">
</div>

https://jsfiddle.net/70qfn3d8/