如何为 html 电子邮件设置@media？

Question

当用户从 gmail 或 chrome 桌面点击电子邮件时，我设置了一些@media 吗？

但我不知道为什么 chrome 桌面会为移动样式 css 获取@media。

我希望

html email

从桌面可以使用

@media screen and (min-width: 1024px)

不是我的默认样式。

我做错了什么？

这是我的@media 设置

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

迷你平板电脑

min-width: 540px

平板电脑

min-width: 768px

桌面

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

电子邮件的典型断点是：

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

即将

@media screen and (min-width: 1024px)

更改为

@media screen and (min-width: 600px)

，Google Chrome和其他桌面应用程序/网络邮件将使用这些。