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

问题描述

构建电子邮件时，我使用媒体查询来调整智能手机的样式。问题是，如果我在浏览器上查看.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上测试电子邮件。

解决方法

对于电子邮件，您需要内联CSS。众所周知，GMail会剥离CSS，并且媒体查询无效。

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

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

和android上的gmail：

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

就选择器而言，您必须对其进行操作以适应您的结构。