iOS Outlook应用仅在HTML电子邮件中允许单个媒体查询

Question

我想在HTML电子邮件中以2个不同的屏幕宽度和媒体查询更改一些文本的字体大小。除了在iOS的Outlook应用程序中，所有设备/客户端都可以在所有设备/客户端上工作。

这是Inline HTML的一个示例：

<td class="para" align="left" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family: Times, 'Times New Roman', serif; font-size: 17px; color: #333333; line-height: 24px; text-align: left; text-indent: 29px; padding: 20px 0 0 0;"><span style="font-family: Times, 'Times New Roman', serif !important;">some text here</span></td>

然后，我有以下CSS：

<style>
@media only screen and (max-width:600px) {
.para {
    font-size: 18px !important;
}
}
@media only screen and (max-width:445px) {
  .para {
    font-size: 20px !important;
}
}
</style>

如果我只有一个媒体查询，则它在iOS的Outlook应用程序中按预期工作，但是当我添加第二个媒体时，媒体查询无效，全部。

我是做错了什么还是这只是您必须与iOS Outlook一起使用的事情？

Answer 1

问题归因于其实现中的错误，如下所示： https：// github 。

​空格和创建双卷发括号，}}是关闭样式块并启动一个新的块，即：

<style>
@media only screen and (max-width:600px) {
.para {
    font-size: 18px !important;
}
}
</style>
<style>
@media only screen and (max-width:445px) {
  .para {
    font-size: 20px !important;
}
}
</style>