电子邮件客户端中的HTML响应图像

时间:2017-11-30 06:03:29

标签: html

我要创建非常简单的内容。请参阅图像链接。我有电子邮件模板screenshot

现在需要做出回应。如果我在更大的屏幕上看到,我应该看到2张图片。如果我在手机中看到我应该看到下面带有文字和按钮的1张图片。



<table align="center" border="0" cellpadding="10" cellspacing="0" style="height:100%;width:100%;">
  <tr>
    <td style="text-align: center;height:5%;">
      <hr style="width: 90%;height: 1px;background-color: #dddddd;">
    </td>
  </tr>
  <tr style="text-align: center;height:1%;">
    <td style="width: 360px; height: 0.5%; font-family: Arial; font-size: 7px; font-weight: bold; line-height: 0.5%; color: rgb(0, 0, 0); text-align: center;">
    </td>
  </tr>
  <tr>
    <td style="text-align: center;">
      <span style="font-size:32px;"><span style="font-family:arial,helvetica,sans-serif;"><b>
        <span style="text-align: center;">Popular destinations </span> 
        </b></span></span>
    </td>
  </tr>
  <tr>
    <td style="text-align: center;">
    </td>
  </tr>
  <tr style="width: 571px;height: 40px;font-family: Arial;font-size: 15px;line-height: 1.33;text-align: center;color: #222222;">
    <td style="text-align: center;margin-left:10%;margin-right:10%;">
      <div style="margin-left: 40px;">
        <font color="#000000" face="Times New Roman">
          <span style="font-size: 16px;">Praesent pretium, eros eget porttitor tempor, turpis nisi dignissim est, vitae vehicula massa est a nulla isus nibh, egestas sit amet feugiat eget, semper sit amet nunc.</span> 
        </font>
      </div>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
            <img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
          </td>
          <td>
            <img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
            <div style="margin-left: 40px; line-height: 1.5;">
              <span style="font-family:times new roman,times,serif;"><span style="font-size:26px;">Brigton</span></span>
              <br>
              Starting from $400/week
            </div>
          </td>
          <td>
            <div style="margin-left: 40px; line-height: 1.5;">
              <span style="font-size:26px;"><span style="font-family:times new roman,times,serif;">Brigton</span></span>
              <br>
              Starting from $400/week
            </div>
          </td>
        </tr>
      </table>
      <div style="margin-left: 40px;">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
          </td>
          <td>
            <div>
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
            </div>
          </td>
          <td>
            <div>
            </div>
          </td>
          <td>
            <div>
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
            </div>
          </td>
        </tr>
      </table>
      <div style="margin-left: 40px;">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
            <img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
          </td>
          <td>
            <img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
            <div style="margin-left: 40px; line-height: 1.5;">
              <span style="font-family: &quot;times new roman&quot;, times, serif;"><span style="font-size: 26px;">Brigton</span></span>
              <br>
              Starting from $400/week
            </div>
          </td>
          <td>
            <div style="margin-left: 40px; line-height: 1.5;">
              <span style="font-family: &quot;times new roman&quot;, times, serif;"><span style="font-size: 26px;">Brigton</span></span>
              <br>
              Starting from $400/week
            </div>
          </td>
        </tr>
      </table>
      <div style="margin-left: 40px;">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
            <div style="margin-left: 40px;">
            </div>
          </td>
          <td>
            <div>
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
            </div>
          </td>
          <td>
            <div>
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;

我遇到的问题是

  1. 当我打开电子邮件移动设备时,图片仍显示2列而不是一列
  2. 按钮未正确对齐。
  3. 在这上面度过一个晚上,请你帮忙

    我无法使用媒体查询,电子邮件需要在Outlook或yahoo或Gmail等常见电子邮件客户端中打开

1 个答案:

答案 0 :(得分:2)

&#13;
&#13;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
</head>

<body>
<style type="text/css">
@media only screen and (max-width: 479px) {
.col{ width:100% !important; float:left !important; margin-bottom:15px !important; }
}
</style>
<table align="center" border="0" cellpadding="10" cellspacing="0" style="height:100%;width:100%;">
  <tr>
    <td style="text-align: center;height:5%;"><hr style="width: 90%;height: 1px;background-color: #dddddd;"></td>
  </tr>
  <tr style="text-align: center;height:1%;">
    <td style="width: 360px; height: 0.5%; font-family: Arial; font-size: 7px; font-weight: bold; line-height: 0.5%; color: rgb(0, 0, 0); text-align: center;"></td>
  </tr>
  <tr>
    <td style="text-align: center;"><span style="font-size:32px;"><span style="font-family:arial,helvetica,sans-serif;"><b> <span style="text-align: center;">Popular destinations </span> </b></span></span></td>
  </tr>
  <tr style="width: 571px;height: 40px;font-family: Arial;font-size: 15px;line-height: 1.33;text-align: center;color: #222222;">
    <td style="text-align: center;margin-left:10%;margin-right:10%;"><div style="margin-left: 40px;"> <font color="#000000" face="Times New Roman"> <span style="font-size: 16px;">Praesent pretium, eros eget porttitor tempor, turpis nisi dignissim est, vitae vehicula massa est a nulla isus nibh, egestas sit amet feugiat eget, semper sit amet nunc.</span> </font> </div></td>
  </tr>
  <tr>
    <td><table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
            <div style="margin-left: 40px; line-height: 1.5;"> <span style="font-family:times new roman,times,serif;"><span style="font-size:26px;">Brigton</span></span> <br>
              Starting from $400/week </div>
            <div style="margin:15px 0 0 40px;"> 
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]--> 
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
          <td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
            <div style="margin-left: 40px; line-height: 1.5;"> <span style="font-size:26px;"><span style="font-family:times new roman,times,serif;">Brigton</span></span> <br>
              Starting from $400/week </div>
            <div style="margin:15px 0 0 40px;"> 
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]--> 
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
            <div style="margin-left: 40px; line-height: 1.5;"> <span style="font-family: &quot;times new roman&quot;, times, serif;"><span style="font-size: 26px;">Brigton</span></span> <br>
              Starting from $400/week </div>
            <div style="margin:15px 0 0 40px;"> 
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]--> 
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
          <td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
            <div style="margin-left: 40px; line-height: 1.5;"> <span style="font-family: &quot;times new roman&quot;, times, serif;"><span style="font-size: 26px;">Brigton</span></span> <br>
              Starting from $400/week </div>
            <div style="margin:15px 0 0 40px;"> 
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]--> 
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
&#13;
&#13;
&#13;