0

我一直在创建响应式电子邮件，并且在桌面/移动更改方面遇到了一些问题。我希望桌面版本看起来像这样：

Order Summary                Shipping Address
12345                         111 Broadway st

手机看起来像这样：

Order Summary     12345
Shipping Address   111 Broadway Street

我已经尝试了几种方法，虽然它适用于我本地服务器上的 html 检查，但当我将测试电子邮件发送到客户端服务器时它不起作用。

代码片段显示了其中一个 div 部分的基本电子邮件模板，任何见解将不胜感激

     @media screen and (max-width: 400px) {

      .two-column {
        max-width: 50%!important;
        width: 50% !important;
        background-color: #730E15!important;
      }

    }

<td class="two-column" style="padding: 5px 0 10px 0;text-align: center;font-size: 0;">
    <div class="section" style="width: 50%;max-width: 300px;display: inline-block;vertical-align: top;">
            <table width="100%" style="border-spacing: 0;font-family: sans-serif;color: #727f80;">
              <tr>
                <td class="inner-td" style="padding: 10px;">
                  <table class="content" style="border-spacing: 0;font-family: sans-serif;color: #727f80;width: 50%;padding-top: 20px;font-size: 16px;line-height: 20px;text-align: justify;">
                    <tr>
                      <td style="padding: 0;">
                        <p>Order Number</p>
                        <p> 12345 </p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </div> <!--- End First Column of Two Columns -->
4

1 回答 1

0

扩展我的评论：

您可以在 HTML 中同时使用水平垂直标题，然后根据屏幕大小显示正确的标题。

您可以使用 CSS媒体查询根据屏幕宽度显示所需的标题。

作为替代方案，如果您使用<div>s 而不是<table>s，则可以使用媒体查询让“列”在桌面上水平浮动，但在移动设备上垂直堆叠。

于 2019-08-12T16:11:40.170 回答