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

Question

我遇到了@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;} 

}

Answer 1

变化

width="600"

到

width="50%"

Answer 2

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

width="80%" 

Answer 3

你.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样式每个电子邮件客户端支持。