与手机兼容的Html电子邮件模板

Question

我正在编写应该是valid for mobiles and monitors的html电子邮件，我知道如何编写电子邮件模板，并且我已经为监视器编写了完美的代码，现在mobile compatibility出现了问题。看附图left one for monitors是完美的，但对于手机它都坏了，我确实看到了media queries，但真的没有得到如何使用他们，谁能帮我做它

如果我有一个td，当在计算机上查看它的，它的两列布局，但是对于移动电话，它应该显示在一行中的一个coluomn，在图像中，以及如何调整一个图像到全屏..as，我希望黄色图像在全屏上，并在全屏宽度下。

​

​

Answer 1

请确保插入了viewport meta标记：

<meta name="viewport" content="width=device-width, initial scale=1.0"/>

之后，您可以在CSS中插入媒体查询：

@media only screen and (max-width: 600px) {
  ...
}

您可以在以下网站找到更多有关响应性html电子邮件的信息：http://www.webdesignerdepot.com/2013/06/responsive-html-email-design/