Html 样式标签在gmail中不起作用,即使文档中另有说明

Html 样式标签在gmail中不起作用,即使文档中另有说明,html,gmail,Html,Gmail,我尝试为我的电子邮件创建响应性设计,一些基本的设置,如在手机上将表格宽度设置为100%或更改文本颜色,它在桌面客户端应用程序(如Thunderbird)中工作,但在android和桌面版Gmail上都无法工作。我试图在互联网上找到答案,但我找不到任何有关这方面的最新信息 我遵循gmail官方网站的指导方针,所以我想它应该会起作用 .有色人种{ 颜色:蓝色; } #身体{ 字体大小:14px; } @媒体屏幕和屏幕(最小宽度:500px){ .有色人种{ 颜色:红色; } } 嗨,皮尔斯 如果

我尝试为我的电子邮件创建响应性设计,一些基本的设置,如在手机上将表格宽度设置为100%或更改文本颜色,它在桌面客户端应用程序(如Thunderbird)中工作,但在android和桌面版Gmail上都无法工作。我试图在互联网上找到答案,但我找不到任何有关这方面的最新信息

我遵循gmail官方网站的指导方针,所以我想它应该会起作用


.有色人种{
颜色:蓝色;
}
#身体{
字体大小:14px;
}
@媒体屏幕和屏幕(最小宽度:500px){
.有色人种{
颜色:红色;
}
}
嗨,皮尔斯

如果窗口宽度为,则此文本为蓝色 低于500px,否则为红色。

杰里

手机版应该是蓝色,桌面版应该是红色。好吧,它们两个上都没有。

将最小值更改为最大值


.有色人种{
颜色:蓝色;
}
#身体{
字体大小:14px;
}
@媒体屏幕和屏幕(最小宽度:500px){
.有色人种{
颜色:红色;
}
}
嗨,皮尔斯

如果窗口宽度为,则此文本为蓝色 低于500px,否则为红色。

杰里


我无法重现该问题。当我测试它时,它显示为红色。
<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>