Question

我有这个简单的表格作为电子邮件发送到移动设备：

<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            What to put here ???
        </style>
    </head>
  <body>
    <table border="0" cellspacing="0" cellpadding="0" 
           style="font-family: Calibri, Arial, Helvetica, sans-serif; max-width: 90vw; border: 0pt solid black; text-align: left; font-size: 12pt; direction: ltr;" id="ContentBorder">
        <tbody>
            <tr id="ContentHeader">
                <td style="padding-bottom: 10pt;" id="ContentHeaderURL">
                    <img src="HeaderImage.jpg" id="imgHeader" style="height:auto !important; width:100% !important;">
                </td>
            </tr>
            <tr>
                <td id="ContentBody" style="padding: 0pt;">
                    <strong>Dear Colleagues,</strong>
                    <br>&nbsp;<br>&nbsp;<br>
                    { { content } }
                </td>
            </tr>                   
            <tr>
                <td id="ContentLink" align="left" style="padding: 20pt 0pt 10pt 10pt; font-family: Arial, Helvetica, sans-serif; font-size: 11pt; text-align: center;">
                    <p style="border-bottom: 1pt solid gray; border-top: 1pt solid gray; padding: 14pt; width: 90%;" id="ContentLinkText">
                        footer row here
                    </p>
                </td>
            </tr>
        </tbody>
    </table>
  </body>
</html>

我的标题图片大小为1024 X 331我需要它来适应不同的移动设备。

当我在pt而不是＆＃39; px＆＃39;中设置表格宽度时，表格内容（例如文字）就可以了。但是图像让我很难过，而且我不知道如何使图像响应地适应屏幕，这样就不会有水平滚动......

我需要通过tody提供A.S.A.P，并且不知道如何处理它。

Answer 1

在桌子内部，你永远不会让它发挥作用。浏览器将始终显示表格中的所有内容，设置表格和/或表格单元格宽度将被忽略（如有必要）。

解决方案是制作表格单元格块，设置图像的最大宽度并使用媒体查询：

@media all and (max-width: 550px) {
    table, tr, td {
        display: block;
    }
    img {
        max-width: 100%;
    }
}

Answer 2

我绝对可以通过电子邮件发送电子邮件。

确保您的头部有视口元标记。

<meta name="viewport" content="width=device-width, initial-scale=1">

移动设备几乎都在风格标签中读取css，因此会尊重您创建的风格！

要替换移动设备上的电子邮件中的图像，请将图片包装在带有ID的范围内，然后在css中隐藏图像并将移动版本显示为背景，并将明确的尺寸应用于范围。

@media (max-width: 320px) {
  span[class=mobile-hero] img {
    /* HIDE THE ACTUAL IMAGE */
    display: none !important;
  }
  span[class=mobile-hero] {
    /* INCLUDE YOUR 320PX MOBILE HERO */
    background-image: url(320.jpg) !important;
    background-repeat: no-repeat;
    width: 320px !important;
    /* ADJUST THE HEIGHT TO FIT THE NEW MOBILE HERO IMAGE */
    height: 480px !important;
    display: block !important;
  }
}

<tr>
  <td class="hero">
    <a href="http://www.linkhere.com">
      <span class="mobile-hero">
         <img style="display:block;" src="images/600.jpg" border="0">
      </span>
    </a>
  </td>
</tr>

如何设置电子邮件到移动设备的响应图像？

2 个答案: