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

【问题标题】：Reponsive email template for gmail - media queries in head doesn't workgmail的响应式电子邮件模板-头部的媒体查询不起作用
【发布时间】：2016-09-07 03:25:57
【问题描述】：

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

一般的电子邮件看起来不错，除了一个

文本 - 带有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不支持。

那我应该如何让它响应呢？

【问题讨论】：

标签： html css email

【解决方案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;
}

【讨论】：