我一直在调试和测试Gmail中的电子邮件模板。我正在使用Zurb Foundation作为基础(我也使用它来内联大多数CSS)。到处看起来都不错,但是Gmail完全忽略了我的媒体查询(soblue类是对网格查询还是媒体查询的测试)。

我已经研究了Gmail媒体查询支持(它应该适用于iOS),并且还验证了CSS。这是style标签内的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;
  }

}

如果您能看到我所缺少的内容,请告诉我。我愿意接受想法。谢谢!

最佳答案

对于媒体查询,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>


希望这个答案有帮助。

10-08 05:57
查看更多