html - Foundation for Emails Inliner 工具破坏布局

Question

EDIT: This problem is present in version 2 of Inliner, I tried V1 and everything is working fine.

Despite my small victory by using v1, the email is not being responsive at all, it displays as desktop version on mobile devices, while it is Responsive in the browser. All of my code is vanilla excerpts from the foundation tutorial.If someone is aware of how can I fix this problem, please share. Thanks!

---

我正在使用 Zurb Foundation for Emails 制作一封响应式电子邮件。一切都很好，但在我完成电子邮件并将其放入 HTML/CSS Inliner tool 之后他们提供，我的电子邮件中断。一切都散落在浏览器周围，我该如何绕过这个问题？

我正在使用默认的网格布局，如他们的 Tutorial page. 中所述 唯一不同的是，我在 foundation.css 中为一些内部元素添加了更多行和一些自定义样式，与网格无关，以及一些其他内联样式，它们也只是颜色和文本对齐。

这是我的自定义 CSS:

#topRight {
  padding: 3% 0 0 30%;
  font-size: 12px;
}

#topRight a img, #topRight a span {
display: inline-block;
vertical-align: middle;
}

.serviceLinks a {
  display: inline-block;
  width: 32%;
 }

 .serviceLinks a img {
  text-align: center;
  margin: 0 auto;
}

#footer {
  background: #32a0ca;
}
#footer p {
 text-align: center;
 color: #fff;
 font-size: 12px;
}
 #footer a {
  color: #35cdff;
}
#footer th {
  padding: 3%;
  margin: 0;
}

Answer 1

我设法解决了问题。

我用了ZURB Email Stack ，事实证明这是创建响应式电子邮件的最简单、响应最灵敏的工具。它使用 NodeJS，它运行自己的本地服务器并为你解析一切，就像 SASS/LESS/Stylus 等设法用 CSS 为你做这件事一样。

您在一个单独的模块文件中创建您的布局，该文件将其注入(inject)到它自己的空白 HTML 模板中。它可以让您通过使用像这样的基本层次结构来专注于您的网格:

<container>
  <row>
    <columns small="12" large="6">Column One</columns>
    <columns small="12" large="6">Column Two</columns>
  </row>
</container>

它基本上为您完成了所有工作。没有表格，没有表格嵌套和重影，没有 td，没有 th。

这太棒了。试试吧。

IMPORTANT: While this tool works like magic, You MUST NOT forget to start Your Foundation watching process by using npm run build in Your CLI. This will force the framework to inline the CSS for You, because otherwise You will have to inline it manually, and this does not work, trust me.

---

Selected this as an answer because it solves my specific problem described in the top post.