How do I write a media query for Gmail?

前端未结

关注

 1  1621

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 table

相关标签:

1条回答

挽巷

2020-12-12 00: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>

Update:

Tested again on 9th July 2019 and code still works

Works on version 2019.5.26.252424914.release (should work between v8.3.12 and current version noted)

Cheers

0 讨论(0)