如何编写Gmail的媒体查询? [英] How do I write a media query for Gmail?
问题描述
我正在尝试为电子邮件编写一些HTML/CSS，但是无法显示和隐藏响应.我有一张大桌子，两张嵌套的桌子.每个嵌套表都是一个基于屏幕大小隐藏或显示的页脚.这是代码
I am trying to write some HTML/CSS for an email but can't get things to show and hide responsively. I have one big table, with two nested tables. Each of the nested tables is a footer that is hidden or shown based on the screen size. Here's the code
<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)中使用预览工具时，看起来不错.
When looking at this in Gmail, both footers appear. When using the preview tool in the email building tool (SendGrid), it looks fine.
我尝试在媒体查询中选择mobile-view和desktop-view类，但是没有用，因此我尝试将属性放入HTML.
I tried selecting the mobile-view and desktop-view classes in the media query but that didnt work- so I tried putting attributes in the HTML.
我在做什么错了?
推荐答案
这是一个有效的示例.它已在Gmail应用(v8.3.12)上进行了测试.
Here is a working example. Its tested on Gmail App (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日再次测试，代码仍然有效
Tested again on 9th July 2019 and code still works
适用于版本2019.5.26.252424914.release(应在v8.3.12和当前版本之间工作)
Works on version 2019.5.26.252424914.release (should work between v8.3.12 and current version noted)
欢呼
这篇关于如何编写Gmail的媒体查询?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
