Zurb Ink电子邮件标题在移动设备上

Question

我的电子邮件中有一个标题，右侧有一个徽标，左侧有一些链接（全部在一行）。工作正常，但在移动设备上查看时，左侧的链接溢出到两行。

我希望移动版本在顶行显示徽标，并在其下方显示如下链接：

DESKTOP：

User

MOBILE：

Logo       Link 1 Link 2 Link 3

我将如何实现这一目标？

我的代码：

        Logo
Link 1 Link 2 Link 3

Answer 1

我不太确定某些类在你的html中做了什么，因为我习惯使用Inky，这是Foundation for Email 2的模板语言，但是解决方法应该是一样的。

由于css的工作方式（级联样式表），您需要在样式标记的邮件顶部的媒体查询中覆盖内联样式和包含几条重要行的包装。

例如：

@media only screen and (max-width: 480px){
 td .example-class { width: 100% !important };
}

如果您使用的是Inky，请仅使用large标记上的<columns>属性。因此，small属性将复制large属性的值。

当您的容器占据整个宽度时，您的链接将被推到您的徽标下。

要在中心显示您的徽标（如果您使用的是Foundation for Email 2）：

• 。<img>元素
上的.float-center类 {li> align="center"属性<img>元素
• 用<img>标签包裹<center>（Outlook 2007,2010和2011所需）

或者在使用Inky时：center周围的img标记就足以完成这项工作。

对齐img：https://foundation.zurb.com/emails/docs/alignment.html

的来源