0

我正在尝试包含只会影响桌面电子邮件客户端而不影响移动电子邮件客户端的 CSS。

在下面的示例中，我为所有客户端添加了 CSS，然后尝试使用仅适用于最大宽度为 480 像素媒体查询的移动客户端的 CSS 声明来覆盖它。

我也尝试过使用@media screen and (min-width: 800px)，但我们正在测试的所有电子邮件客户端似乎都忽略了这一点。

然而，当我在 Litmus 中测试电子邮件时，所有电子邮件客户端，甚至是基于桌面的电子邮件客户端，都以 100% 宽度而不是 500px 显示表格

table[id="socialTbl"] {
    width: 500px !important;
    max-width: 500px !important;
}

table[id="locations"] {
    width: 500px !important;
    max-width: 500px !important;
}



/* Desktops and laptops ----------- */
@media only screen 
and (max-width : 480px) {
/* Styles */

table[id="socialTbl"] {
    width: 100% !important;
    max-width: 100% !important;
}

table[id="locations"] {
    width: 100% !important;
    max-width: 100% !important;
}
}
4

1 回答 1

2

对于您的桌面客户端，所有 CSS 都需要内联，媒体查询仅适用于您的移动设备。

这是对 Campaign Monitor 流程的一个非常好的概述 - http://www.campaignmonitor.com/guides/mobile/

于 2012-10-03T13:43:17.453 回答