css - How do I write a media query for Gmail?

Question

Welcome To Ask or Share your Answers For Others

css - How do I write a media query for Gmail?

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

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>

When looking at this in Gmail, both footers appear. When using the preview tool in the email building tool (SendGrid), it looks fine.

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.

What am I doing wrong?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

393 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T03:09:02+0000

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>

Categories

css - How do I write a media query for Gmail?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags