Question

我正在处理一封响应式HTML电子邮件。除媒体查询外，我的所有代码都内联。（我知道这对某些电子邮件客户端不起作用！）在媒体查询中，我定义了2个类：

@media only screen and (max-device-width: 480px), screen and (max-width: 550px) {

img[class="width320"] { 
width: 320px !important;
}

img[class="autoHeight"] {
height:auto !important;
}
}

当我将它们添加到HTML -

时

<tr>
    <td width="700" class="" style="display: block;" border="0">
        <img src="Welcome_WoodBottom.jpg" class="width320 autoHeight" height="26" width="700" border="0" alt="" style="display:block;" />
    </td>
</tr>

这两种风格都不起作用。样式单独工作，但不是在它们在一起时。当我在Firebug中检查代码时，类＆＃34; width320＆＃34;和＆＃34; autoHeight＆＃34;甚至不会出现在检查员面前。

我错过了什么？您是否可以出于某种原因在电子邮件媒体查询中使用多个类？

我真的想在我的电子邮件中使用多个类别的多个类，所以我希望有一个解决方案。非常感谢你！

Answer 1

当您通过属性选择器（[attribute="value"]）在css上选择元素时，它会查找标记上指定的确切值。在您的情况下，您的img“样式”属性值为"width320 autoHeight"。因此，img[class="width320 autoHeight"]会起作用，因为您正在搜索确切的值。

由于您要检查它是否包含某个类，因此在css选择器上执行此操作的正确方法是使用.class语法。所以它会是这样的：

@media only screen and (max-device-width: 480px), screen and (max-width: 550px) {

    img.width320 { 
        width: 320px !important;
    }

    img.autoHeight {
        height:auto !important;
    }
}

Answer 2

我最近用CSS [attribute~ = value]选择器测试了这个：

* [class~="fullWidth"] {
width:100% !important;
max-width:100% !important;
}
* [class~="autoHeight"] {
height: auto !important;
}

<td class="fullWidth autoHeight">...</td>

这似乎与移动电子邮件客户端相得益彰。你能试试吗？

Answer 3

您可以使用以下格式：

@media only screen and (max-device-width: 480px), screen and (max-width: 550px) {

img[class].width320 { 
    width: 320px !important;
}

img[class].autoHeight {
    height:auto !important;
} }

这将允许您将两个类应用于图像。

多个类无法在响应式电子邮件HTML中使用

3 个答案: