1

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

4

1 回答 1

1

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

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

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

和 android 上的 gmail：

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

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

于 2020-10-28T20:14:41.703 回答