Question

目前处理第一个严重的响应式html电子邮件并且完全疯了 - 有时候 - 电子邮件是完全响应的，但有时它只是超出了table-td构造中的预设边界。我把它限制在图像上，主要是头部图像。一旦发送电子邮件，它就会超出边界并破坏电子邮件。这一点，而所有其他图像正常进行。但这只能通过努力才能解决，但正如我所说 - 有时 - 完全响应，即头部图像。

为了让它按预期响应，使用mac和apple邮件，我在浏览器中打开.html文档并按下cmd + I;在所有图像都加载之前。基本上只显示边框，背景颜色和文字。如果cmd + I命令会变慢，即使加载了一个图像，响应性也会再次变得古怪。

有趣的事实（并非如此）：如果操作正确，即如所描述的那样快，则Apple Mail客户端不会显示＆＃34;附件＆＃34;收件箱中的回形针，但预览，大窗口。

为前三个（和3个最大）图像提供html和css以及该区域的通用图像。为什么标题图像会这样？将指南理解为宽度=＆＃34; 100％＆＃34;会覆盖设定的宽度。

基本上遵循tutsplus.com的指南进行简单修改（bg颜色，边框，尺寸等）

＆＃13;

body {
  margin: 0 !important;
  padding: 0;
  background-color: #f9f9f9;
}

table {
  border-spacing: 0;
  font-family: sans-serif;
  color: #333333;
}

td {
  padding: 0;
}

img {
  border: 0;
}

div[style*="margin: 16px 0"] {
  margin: 0 !important;
}

.wrapper {
  width: 100%;
  table-layout: fixed;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background-color: #f9f9f9;
}

.webkit {
  max-width: 602px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 30px;
}

.outer {
  Margin: 0 auto;
  width: 100%;
  max-width: 602px;
  border: 1px solid #d3d3d3;
  background-color: #ffffff;
}

.full-width-image img {
  width: 100%;
  max-width: 600px;
  height: auto;
}

.inner {
  padding: 10px;
}

p {
  Margin: 0;
}

a {
  color: #ee6a56;
  text-decoration: underline;
}

.webversion {
  background-color: #d3d3d3;
  text-align: center;
  font-size: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.h1 {
  font-size: 21px;
  font-weight: bold;
  Margin-bottom: 18px;
}

.contents {
  width: 100%;
}

.headline {
  width: 100%;
  max-width: 600px;
  text-align: left;
}

.one-column .contents {
  text-align: left;
}

.one-column .p {
  font-size: 14px;
  Margin-bottom: 10px;
}

@media screen and (max-width: 400px) {
  .two-column .column,
  .three-column .column {
    max-width: 100% !important;
  }
  .two-column img {
    max-width: 100% !important;
  }
  .three-column img {
    max-width: 50% !important;
  }
}

@media screen and (min-windth: 401px) and (max-width: 620px) {
  .three-column .column {
    max-width: 33% !important;
  }
  .two-column column {
    max-width: 50% !important;
  }
}

＆＃13;

<body style="margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;background-color:#f9f9f9;">
  <center class="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#f9f9f9;">
    <div class="webkit" style="max-width:602px;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;padding-top:20px;padding-bottom:30px;">
      <!--[if (gte mso 9)|(IE)]>
            <table width="602" align="center" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
                <tr>
                    <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                        <![endif]-->
      <table class="outer" align="center" style="border-spacing:0;font-family:sans-serif;color:#333333;Margin:0 auto;width:100%;max-width:602px;border-width:1px;border-style:solid;border-color:#d3d3d3;background-color:#ffffff;">
        <tr>
          <td class="webversion" style="padding-right:0;padding-left:0;background-color:#d3d3d3;text-align:center;font-size:10px;padding-top:3px;padding-bottom:3px;">
            <a href="BROWSER LINK" style="color:#ee6a56;text-decoration:underline;">READ IN BROWSER</a>
          </td>
        </tr>
        <tr>
          <td class="full-width-image" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
            <img src="IMGLINK/huvud.png" alt="" style="border-width:0;width:100%;max-width:600px;height:auto;" />
          </td>
        </tr>
        <tr>
          <td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
            <table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;">
              <tr>
                <td class="inner contents" style="padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;width:100%;text-align:left;">
                  <p class="h1" style="Margin:0;font-size:21px;font-weight:bold;Margin-bottom:18px;text-align:center;">HEADLINE HERE</p>
                  <p class="p" style="Margin:0;font-size:14px;Margin-bottom:10px;">TEXT GOES HERE</p>
                  <p class="p" style="Margin:0;font-size:14px;Margin-bottom:10px;">TEXT GOES HERE</p>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="two-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;text-align:center;font-size:0;">
            <!--[if (gte mso 9)|(IE)]>
                                        <table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;" >
                                            <tr>
                                                <td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                                                <![endif]-->
            <div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:top;">
              <table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;">
                <tr>
                  <td class="inner" style="padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;">
                    <table class="contents" style="border-spacing:0;font-family:sans-serif;color:#333333;width:100%;font-size:14px;text-align:left;">
                      <tr>
                        <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
                          <img src="IMGLINK/utb.png" width="280" alt="" style="border-width:0;width:100%;max-width:280px;height:auto;" />
                        </td>
                      </tr>
                      <tr>
                        <td class="text" style="padding-bottom:0;padding-right:0;padding-left:0;padding-top:10px;">TEXT GOES HERE
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
                                                </td>
                                                <td width="50%" valign="top" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;" >
                                                <![endif]-->
            <div class="column" style="width:100%;max-width:300px;display:inline-block;vertical-align:top;">
              <table width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;">
                <tr>
                  <td class="inner" style="padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:10px;">
                    <table class="contents" style="border-spacing:0;font-family:sans-serif;color:#333333;width:100%;font-size:14px;text-align:left;">
                      <tr>
                        <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
                          <img src="IMGLINK/erf.png" width="280" alt="" style="border-width:0;width:100%;max-width:280px;height:auto;" />
                        </td>
                      </tr>
                      <tr>
                        <td class="text" style="padding-bottom:0;padding-right:0;padding-left:0;padding-top:10px;"> Text goes here
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
                                                </td>
                                            </tr>
                                        </table>
                                        <![endif]-->
          </td>
        </tr>

＆＃13;

HTML-Email响应 - 图像＆＃34;块＆＃34;

0 个答案: