我一直在调试和测试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>
希望这个答案有帮助。