如何在调整大小

Question

当屏幕尺寸达到600px或更低时，我想让td＆＃39; s表格的宽度，即它们在一列中垂直堆叠：

https://jsfiddle.net/gkygudyp/

</tr>
    <td class="stack" style="background-color:yellow;">
        Hello
    </td>
    <td class="stack" style="background-color:orange;">
        Hello
    </td>
</tr>

.stack {
      width: 320px;
}

Answer 1

不幸的是，许多电子邮件客户端都不支持大多数现代Web标准，这使得这种响应式设计变得困难或不可能。由于任何电子邮件客户端都不允许JavaScript（出于安全原因），此处唯一的其他解决方案是使用媒体查询，例如

@media (max-width: 600px) {
  /* Your rules here */
}

但是，请注意email client support媒体查询。

您在评论中提到您无法在HTML电子邮件中使用div。但实际上，开发人员通常会选择table，因为虽然所有电子邮件客户端都支持div，但它们不支持许多必要的CSS规则，以便根据它们正确地进行布局。

Answer 2

尝试将td更改为在媒体代码中阻止

@media (max-width:600px){
    .stack{
        display: block;
        width: 100%;
    }
}