How to set @media for html email?

Question

I have set some @media when user click email from gmail or chrome desktop ?

But I have no idea why chrome desktop will get @media for mobile style css.

I hope html email from desktop can use @media screen and (min-width: 1024px) not my default style.

What I did wrong ?

Here is my @media setting

/* without @media is for my mobile device */

for mini tablet

min-width: 540px

for tablet

min-width: 768px

for desktop

min-width: 1024px


<style>
  body {
    margin: 0;
  }
  main {
    height: 100%;
  }
    
  /* for mobile : real mobile device open from Gmail APP layout will have default margin left and right */
                
  .user-name {
    font-size: 20px;
    margin: 0 0 0px 0;
  }
  .unread-message {
    font-size: 12px;
  }
  .unread-type {
    font-size: 10px;
   }
                
  /* for mini tablet */
  @media screen and (min-width: 540px) {
    .user-name {
      font-size: 20px;
      margin: 0 0 14px 0;
    }
    .unread-message {
      font-size: 16px;
    }
    .unread-type {
      font-size: 14px;
    }
  }
    
  /* for tablet */
  @media screen and (min-width: 768px) {
    .user-name {
      font-size: 20px;
      margin: 0 0 14px 0;
    }
    .unread-message {
      font-size: 14px;
    }
    .unread-type {
      font-size: 12px;
    }
  }
    
  /* for desktop */
  @media screen and (min-width: 1024px) {
    .user-name {
      font-size: 20px;
      margin: 0 0 14px 0;
    }
    .unread-message {
      font-size: 14px;
     }
    .unread-type {
      font-size: 12px;
    }
  }
</style>

Answer 1

The typical breakpoints for email are:

<450 for mobile 450-600 for tablet 600+ for desktop

I.e. change @media screen and (min-width: 1024px) to @media screen and (min-width: 600px) and Google Chrome and other desktop apps/webmail will use these.