CSS媒体查询在HTML电子邮件中不起作用

Question

当我构建电子邮件时，我使用媒体查询来调整智能手机的样式。问题是，如果我在浏览器上查看 .html 文件，一切正常，但是当我向手机发送测试邮件时，媒体查询中设置的所有样式都消失了。

代码：

    @media only screen and (max-width:768px) {
    * {
       background-color: red; (for testing)
    }
    body > div > div > table > tbody > tr > td {
        padding: 10px !important;
    }
    .image {
        margin: 15px 0 !important;
    }
    .footer-icon-container {
        width: 75px !important;
    }
    .title {
        padding: 10px 0px !important;
    }
    .avatar > table > tbody > tr > td {
        padding: 40px 0 0 30px !important;
    }
    .sub-title > table > tbody > tr > td {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

有人可以向我解释我做错了什么以及我可以尝试解决什么问题吗？如果有帮助，我会在 OnePlus 8 上的 Android 10 上的最新版 Gmail 上测试电子邮件。

Answer 1

对于电子邮件，您需要内联您的 CSS。众所周知，GMail 会去除 css 并且媒体查询不起作用。

您可以通过以下方式定位 Gmail：

u ~ div .class-name{
    display:inline !important;
}

Android 上的 gmail：

div > u + .class-name{
    display:inline !important;
}

就选择器而言，您必须使用它来适应您的结构。