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上测试安卓10上最新版本的Gmail上的电子邮件。

Answer 1

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

你可以用这个瞄准Gmail：

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

和安卓系统上的gmail：

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

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