Question

我一直在调试和测试Gmail中的电子邮件模板。我使用Zurb Foundation作为基础（我也使用它来内联我的大部分CSS）。它在任何地方看起来都很好，但Gmail完全忽略了我的媒体查询（soblue类是对它是网格还是媒体查询的测试）。

我已经研究了Gmail媒体查询支持（它应该适用于iOS），我也验证了我的CSS。这是样式标记中的CSS：

@media only screen and (max-width: 596px) {
.soblue {
 color: #0000FF !important;
}

.small-float-center {
    margin: 0 auto !important; float: none !important; text-align: center !important;
  }
  .small-text-center {
    text-align: center !important;
  }
  .small-text-left {
    text-align: left !important;
  }
  .small-text-right {
    text-align: right !important;
  }

  table.body img {
    width: auto; height: auto;
  }
  table.body center {
    min-width: 0 !important;
  }
  table.body .container {
    width: 95% !important;
  }
  table.body .columns {
    height: auto !important; box-sizing: border-box; padding-left: 16px !important; padding-right: 16px !important;
  }
  table.body .column {
    height: auto !important; box-sizing: border-box; padding-left: 16px !important; padding-right: 16px !important;
  }
  table.body .columns .column {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .columns .columns {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .column .column {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .column .columns {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .collapse .columns {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  table.body .collapse .column {
    padding-left: 0 !important; padding-right: 0 !important;
  }

  td.small-12 {
    display: inline-block !important; width: 100% !important;
  }
  th.small-12 {
    display: inline-block !important; width: 100% !important;
  }
  .columns td.small-12 {
    display: block !important; width: 100% !important;
  }
  .column td.small-12 {
    display: block !important; width: 100% !important;
  }
  .columns th.small-12 {
    display: block !important; width: 100% !important;
  }
  .column th.small-12 {
    display: block !important; width: 100% !important;
  }

  table.body table.columns td.expander {
    display: none !important;
  }
  table.body table.columns th.expander {
    display: none !important;
  }
  table.body .right-text-pad {
    padding-left: 10px !important;
  }
  table.body .text-pad-right {
    padding-left: 10px !important;
  }
  table.body .left-text-pad {
    padding-right: 10px !important;
  }
  table.body .text-pad-left {
    padding-right: 10px !important;
  }
  table.menu {
    width: 100% !important;
  }
  table.menu td {
    width: auto !important; display: inline-block !important;
  }
  table.menu th {
    width: auto !important; display: inline-block !important;
  }
  table.menu.vertical td {
    display: block !important;
  }
  table.menu.vertical th {
    display: block !important;
  }
  table.menu.small-vertical td {
    display: block !important;
  }
  table.menu.small-vertical th {
    display: block !important;
  }
  table.menu[align="center"] {
    width: auto !important;
  }
  table.button.small-expand {
    width: 100% !important;
  }
  table.button.small-expanded {
    width: 100% !important;
  }
  table.button.small-expand table {
    width: 100%;
  }
  table.button.small-expanded table {
    width: 100%;
  }
  table.button.small-expand table a {
    text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  table.button.small-expanded table a {
    text-align: center !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  table.button.small-expand center {
    min-width: 0;
  }
  table.button.small-expanded center {
    min-width: 0;
  }
}
@media only screen and (max-width: 480px) {
  table#canspamBar td {
    font-size: 14px !important;
  }
  table#canspamBar td a {
    display: block !important; margin-top: 10px !important;
  }

}

如果你能看到我失踪的东西，请告诉我。我对创意持开放态度。谢谢！

Answer 1

Gmail在媒体查询方面非常挑剔。你在代码中犯了任何错误，整条线被剥夺了。从第一眼看，我发现代码中有空格，gmail会忽略它。

目前：

@media only screen and (max-width: 596px) {

删除冒号后的空格并试一试。成功：

@media only screen and (max-width:596px) {

在我选择了样板后，我做了很多测试但它还没有让我失望。

同样非常重要的是， Gmail只会读取第一个媒体查询，因此，如果您计划使用媒体查询定位gmail，请将所有受支持的查询放在第一个查询中。如果您想使用更多，那么您可以使用它们来支持其他设备/电子邮件客户端。

<强>更新

以下代码适用于gmail应用。

<html>
  <head>
    <style>
      .colored {
        color: #000000;
      }
      #body {
        font-size: 26px;
      }
      @media only screen and (max-width:480px) {
        .colored {color: #ff0000 !important;}
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pirce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jery</p>
    </div>
  </body>
</html>

希望这个答案有所帮助。

Answer 2

制作电子邮件模板有一些规则，您可能需要记住：

理想情况下使用内联样式，而不是样式标记
流体布局，无响应，意味着避免使用媒体查询
div上的表格可能更难编码，但在不同的电子邮箱中会有更好的显示
像1993年一样编码，真的，你使用的最老的标准，你更有可能避免陷入垃圾邮件和布局问题

对于Gmail，它具有固定的电子邮件显示空间分辨率，这就是为什么它不会缩小或扩展，尽管你移动宽度面板，ergo忽略媒体查询。

最好的解决方案是，使用带有表格布局的表格：固定并且根本不进行媒体查询。

为什么Gmail会忽略我的媒体查询？（在iOS上）

2 个答案:

为什么Gmail会忽略我的媒体查询？ （在iOS上）

2 个答案:

为什么Gmail会忽略我的媒体查询？（在iOS上）