Question

我正在努力创建一个电子邮件模板＆＃34;从头开始＆＃34; （然后我在mailchimp中复制粘贴，因为他们的CMS不适合我必须做的事情。）

除了

之外，一般电子邮件看起来不错

text - width 50%必须成为的图片：

图像

文本

使用width: 100%

.responsive-width {
    width: 50%;
}

@media only screen and (max-width: 480px) {
  .responsive-width {
      width: 100% !important;
      min-width: 100% !important;
  }
}



<td valign="top" style="padding: 0!important;">
  <table class="responsive-width" align="right" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="align-mid" style="padding: 0!important;text-align: center !important;">
        <img src="myimg-url.jpg" alt="newsletter photo cover">
      </td>
    </tr>
  </table>
  <table class="responsive-width" align="left" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td style="padding: 0!important;">
        <h2 class="no-top">Title!</h2>
        <div class="grey other-font">
          TEXT
          <br>
          <a class="btn align-mid button-orange read-more left" href="">READ MORE</a>
        </div>
      </td>
    </tr>
  </table>
</td>

我删除了内联样式以提高可见性。

媒体查询位于<head>元素内<style>内。但我听说gmail没有支持它。

我该如何让它响应呢？

Answer 1

你可以像这样全部内联。

<img src="myimg-url.jpg" width="480" alt="..." border="0" style="width:100%; max-width:480px;">

然后，通过这种方式，您可以获得完全响应的图像，并且可以避免一些客户端的不一致。

此外，您可以添加一个类并将该元素作为目标;

img.thumbnail{
   max-width:480px !important;
   width: 100% !important;
}

用于gmail的响应式电子邮件模板 - 头部的媒体查询不起作用

1 个答案: