多个类在响应式电子邮件 HTML 中不起作用答案

【问题标题】：Multiple Classes not working in Responsive Email HTML多个类在响应式电子邮件 HTML 中不起作用
【发布时间】：2014-06-09 14:27:50
【问题描述】：

我正在处理一封响应式 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 中检查代码时，“width320”和“autoHeight”类甚至没有出现在检查器中。

我错过了什么？由于某种原因，您不能在电子邮件媒体查询中使用多个类吗？

我真的很想在我的电子邮件的各个领域使用多个类，所以我希望有一个解决方案。提前非常感谢您！

【问题讨论】：

试试这个 img.width320{} 和 img.autoHeight{} 而不是 img[class="autoHeight"]{}

标签： css responsive-design media-queries html-email

【解决方案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;
    }
}

【讨论】：

谢谢！那讲得通。由于这是电子邮件，因此我需要通过属性选择器选择元素，但我想将类分开，以便可以将其他类添加到该样式中。有没有办法使用 .class 语法来做到这一点，并且仍然适用于电子邮件？
可以使用类作为属性名。喜欢：<img src="Welcome_WoodBottom.jpg" width320="" autoHeight=""。然后可以通过属性选择器选择：img[width320]和img[autoHeight]
有趣！您知道这对所有电子邮件客户端是否安全吗？

【解决方案2】：

我最近使用 CSS [attribute~=value] 选择器对此进行了测试：

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

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

这似乎在移动电子邮件客户端上表现良好。你能试试这个吗？

【讨论】：

【解决方案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;
} }

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

【讨论】：