war*_*an1 4 css email gmail html-email sendgrid
我正在尝试为电子邮件编写一些 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 中放置属性。
我究竟做错了什么？
这是一个工作示例。它在 Gmail 应用程序 (v8.3.12) 上进行了测试。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
@media only screen and (max-width:768px) {
.desktop-view{display: none !important;}
}
@media only screen and (min-width:769px) {
.mobile-view{display: none !important;}
}
</style>
</head>
<body>
<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;">
<tr>
<td> mobile content here </td>
</tr>
</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;">
<tr>
<td> desktop content here </td>
</tr>
</table>
</body>
</html>更新：
2019 年 7 月 9 日再次测试，代码仍然有效
适用于版本 2019.5.26.252424914.release（应在 v8.3.12 和当前版本之间工作）
干杯
| 归档时间： |
|
| 查看次数： |
13957 次 |
| 最近记录： |