0

我正在处理一封响应式电子邮件，在 Litmus for Android 6.0 和三星 Galaxy S7 物理设备上对其进行测试。

这是我在头部样式部分的媒体查询：

@media screen and (max-width: 611px), screen and (max-device-width: 611px){
[class=devicewidth100]{width:100%!important; height:auto!important;margin-left:auto; margin-right:auto; background-color:#FFFFFF!important;}
[class=devicewidth98]{width:98%!important; height:auto!important;margin-left:auto; margin-right:auto; background-color:#FFFFFF!important;}
[class=devicewidth60]{width:60%!important; height:auto!important;margin-left:auto; margin-right:auto; background-color:#FFFFFF!important;}
[class=imgdevicewidth]{width:100%!important; height:auto!important; margin-left:auto!important; margin-right:auto!important;}
[class=hide]{display:none !important;}
[class=center]{text-align:center!important; padding-top:5px!important; padding-bottom:5px!important; height:auto!important;}
}

以下是正文中的 HTML 代码：

<tr><td style="border-collapse: collapse;"><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div style="width: 185px;display: inline-block;vertical-align: top;margin-left: auto;margin-right: auto;height: auto!important;background-color: #FFFFFF!important;" class="devicewidth100">
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;align-content: center;"><tr><td width="15" style="border-collapse: collapse;"></td><td width="170" class="devicewidth100" style="border-collapse: collapse;margin-left: auto;margin-right: auto;width: 100%!important;height: auto!important;background-color: #FFFFFF!important;"><a href="#" style="color: #F4F4F4;text-decoration: none!important;"><img src="http://placehold.it/810x456" alt="" style="border: none;display: block;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;margin-left: auto;margin-right: auto;width: 100%!important;height: auto!important;background-color: #FFFFFF!important;" width="170" height="125" class="devicewidth100"></a></td><td width="15" style="border-collapse: collapse;"></td></tr></table></div><!--[if (gte mso 9)|(IE)]></td><td><![endif]-->
<div style="width: 430px;display: inline-block;vertical-align: middle;margin-left: auto;margin-right: auto;height: auto!important;background-color: #FFFFFF!important;" class="devicewidth100">
<table width="100%" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;align-content: center;">
<tr><td width="15" style="border-collapse: collapse;"></td><td align="left" class="center" style="text-align: left;border-collapse: collapse;padding-top: 5px!important;padding-bottom: 5px!important;height: auto!important;" height="125" valign="middle"><a href="#" style="font-family:'Open Sans', verdana; font-size:20px; font-weight:bold; color:#000000; line-height:22px; text-align:left; text-decoration:none;" class="fontsize-top-news">This is my text, it should get bigger on mobile screens at some point.</a></td></tr>
</table></div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td></tr>

我正在尝试使用媒体查询使图像全角。由于 Litmus 和 Galaxy S7 Gmail 应用程序现在应该支持 CSS/媒体查询，有什么建议吗？

4

2 回答 2

2

我没有要测试的设备，所以这只是一个猜测，但我会尝试使用标准的 css 表示法：

@media screen and (max-width: 611px), screen and (max-device-width: 611px){
    .devicewidth100{
        width:100%!important; 
        height:auto!important;
        margin-left:auto; 
        margin-right:auto; 
        background-color:#FFFFFF!important;
    }
    .devicewidth98{
        width:98%!important; 
        height:auto!important;
        margin-left:auto; 
        margin-right:auto; 
        background-color:#FFFFFF!important;
    }
    .devicewidth60{
        width:60%!important; 
        height:auto!important;
        margin-left:auto; 
        margin-right:auto; 
        background-color:#FFFFFF!important;
    }
    .imgdevicewidth{
        width:100%!important;
        height:auto!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
    .hide{
        display:none !important;
    }
    .center{
        text-align:center!important;
        padding-top:5px!important;
        padding-bottom:5px!important;
        height:auto!important;
    }
}
于 2017-01-11T08:35:12.023 回答
0

这可能取决于您使用的客户端。并非所有版本的 gmail 应用程序都支持媒体查询。

Gmail Android 应用程序（POP/IMAP 帐户）将不支持媒体查询。

您可以在此处找到完整列表：

Gmail 推出对响应式设计的支持、改进的字体样式 + 可访问性的 CSS

于 2017-01-16T13:20:25.750 回答