调整浏览器大小时响应式电子邮件媒体查询不起作用答案

【问题标题】：Responsive Email Media Query Not Working When Resizing Browser调整浏览器大小时响应式电子邮件媒体查询不起作用
【发布时间】：2018-01-16 17:30:00
【问题描述】：

我的@media 查询有问题。当我调整浏览器（chrome）的大小时，它不会缩小。我现在尝试了几种解决方案，但无法正常工作。我确定这是一个简单的用户错误，但从我读过的不同文章和博客来看，这似乎是合乎逻辑的解决方案，应该可以工作。

<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="body-table">
          <tbody>
            <tr align="center">
              <td width="100%" class="container" bgcolor="#ffffff" height="100">

还有媒体查询：

@media screen and (max-width: 600px){
        *[class="container"] { width:100% !important;}

}

【问题讨论】：

标签： css media-queries

【解决方案1】：

我认为问题在于您的表格中的宽度是固定的。因此，尝试将您的固定宽度更改为百分比。像这样

width="80%"

【讨论】：

【解决方案2】：

您的 .container 表不会缩小，因为它的父级是固定宽度。因此，我们将为保存主表的td 添加宽度，而不是固定宽度的父级。

<table border="1" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="600">
            <table class="container" width="100%" style="background: peru;">
                <tr>
                    <td>This will shrink when width less than 600 pixels.</td>
                </tr>
            </table>
        </td>
         <td></td>
     </tr>
</table>

您可以找到更详细的答案here 或此笔here，我强烈建议您查看此guide 以了解每个电子邮件客户端支持的 CSS 样式。

【讨论】：

【解决方案3】：

改变

width="600"

到

width="50%"

【讨论】：