我正在尝试为一封电子邮件编写一些HTML/CSS,但是无法相应地显示和隐藏内容。我有一个大表,其中包含两个嵌套表。每个嵌套表都是一个页脚,根据屏幕大小显示或隐藏页脚。代码如下
<style>
@media all and (max-width: 768px) {
table[table-view=desktop] {
display: none !important;
}
table[table-view=mobile] {
display: block;
}
}
@media all and (min-width: 769px) {
table[table-view=mobile] {
display: none !important;
}
table[table-view=desktop] {
display: block;
}
}
</style>
<some other stuff here>
<table class="module mobile-view" table-view="mobile" border="0" cellpadding="0" cellspacing="0" data-type="code" role="module" style="table-layout: fixed;">
...
</table>
<table class="module desktop-view" table-view="desktop" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
...
</table>
当在Gmail中查看这个时,两个页脚都会出现。当使用电子邮件构建工具(SendGrid)中的预览工具时,它看起来很好。
我尝试在媒体查询中选择mobile-view
和desktop-view
类,但没有成功-所以我尝试在HTML中放置属性。
我哪里做错了?
1条答案
按热度按时间nwlqm0z11#
这是一个工作示例,在Gmail应用程序(v8.3.12)上进行了测试。
也适用于版本2019.5.26.252424914.release(应适用于v8.3.12和注明的当前版本)
最重要的部分是冒号,如果你的媒体查询声明中冒号前后都有空格,那么Gmail会去掉style标签。