html - 如何在调整大小时更改列结构

Question

当屏幕尺寸达到 600px 或更低时，我想使 td 成为表格的宽度，即它们垂直堆叠在一列中:

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，但它们不支持正确拥有基于他们。