为什么 gmail 不响应媒体查询？

Question

Whosebug 有什么好用的？我一直在努力弄清楚为什么 Gmail 没有接受我的 HTML 电子邮件的媒体查询。它在宽屏上看起来不错，但 Gmail 没有响应我的 phone 的屏幕宽度，所以 phone 看起来很奇怪而且有错误。

我已经尝试查看类似的问题，甚至尝试重写我的 CSS 到我重写我的 CSS 几次以查看媒体查询是否即使是最小的零钱也会捡起来。

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width ,initial-scale=1" />
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');

    body {
      margin: 0;
      padding: 15px;
    }

    .center {
      text-align: center;
      margin: 0 auto;
    }

    .wrapper {
      width: 100%;
      table-layout: fixed;
    }

    .inner-wrapper {
      width: 100%;
      max-width: 670px;
      background: #554348;
      margin: 0 auto;
    }

    table {
      border-spacing: 0;
      font-family: sans-serif;
      color: #727f80;
    }

    .header-table {
      text-align: center;
      padding: 10px 0px 0 0;
    }

    .header-table .header {
      width: 100%;
      max-width: 610px;
      display: inline-block;
      background: #fff;
      border-top: 2px solid #E5C2C0;
      border-radius: 6px 6px 0 0;
      padding-bottom: 24px;
    }

    .header-table img {
      width: 75px;
      float: left;
      border: 2px solid #E5C2C0;
      border-radius: 6px 0 0 0;
      border-top: none;
    }

    .slogan {
      color: #000;
      font-size: 12px;
      margin-top: 124px;
      color: #7FC29B;
    }

    .slogan-hr {
      width: 25vh;
    }

    .outer-table {
      width: 100%;
      max-width: 670px;
      margin: 0 auto;
    }

    .outer-table img {
      width: 100%;
      max-width: 670px;
      height: auto;
    }

    td {
      padding: 0;
    }

    p {
      margin: 0;
    }

    a {
      color: #f1f1f1;
      text-decoration: none;
    }

    .main-table {
      width: 100%;
      max-width: 610px;
      margin: 0 auto;
      border-radius: 6px;
      margin-top: 25px;
      margin-bottom: 25px;
      background: #fff;
    }

    .three-column {
      width: 100%;
    }

    .three-column img {
      width: 120px;
    }

    .section {
      /* Change display to inline-block on mobile */
      width: 100%;
      display: inline-flex;
      margin-top: 15px;
      margin-left: 30px;
    }

    .section .pic-container {
      display: inline-block;
    }

    .section .desc-container {
      margin: auto;
    }

    .desc-container td {
      padding-bottom: 25px;
    }

    .desc-container .content {
      margin-top: 32px;
    }

    .desc-table p {
      margin-top: 5px;
      margin-bottom: 10px;
    }

    .desc-table .h3 {
      font-weight: bold;
      text-transform: uppercase;
      color: #424B54;
    }

    .desc-table .price {
      font-size: 20px;
      font-family: 'Libre Baskerville', serif;
      color: #7FC29B;
    }

    .button-container {
      margin-right: 90px;
      margin-top: 65px;
      height: 35px;
    }

    .btn-holder {
      font-size: 25px;
      padding: 9px;
      border-radius: 25px;
      color: #fff;
      background: #4C4B63;
      text-decoration: none;
    }

    .outer-table-2 {
      width: 100%;
      max-width: 670px !important;
      background: #fff;
      border-top: 3px solid #D4F5F5;
      border-bottom: 3px solid #D4F5F5;
    }

    .call-to-action {
      width: 100%;
      max-width: 670px;
      text-align: center;
    }

    .cta-text {
      font-size: 24px;
      margin-top: 30px;
      margin-bottom: 30px;
      color: #4C4B63;
    }

    .cta-button {
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .outer-table-3 {
      margin-top: 30px;
      width: 100%;
      max-width: 670px;
      background: #4C4B63;
      border-top: 2px solid #7FC29B;
      border-radius: 6px 6px 0 0;
    }

    .footer-table {
      width: 100%;
      margin-top: 32px;
    }

    .footer-header-table {
      width: 100%;
    }

    .footer-header {
      color: #fff;
      text-align: center;
    }

    .footer-header .heart {
      color: red;
    }

    .footer-logo-table {
      float: left;
    }

    .footer-logo {
      width: 67px;
    }

    .footer-social-table {
      width: 100%;
      text-align: center;
    }

    .social-list {
      display: inline-flex;
      list-style: none;
    }

    .social-list li {
      margin-left: 10px;
      margin-right: 10px;
    }

    .social-list img {
      width: 55px;
    }

    .footer-text-table {
      float: right;
      text-align: right;
      margin-top: 25px;
    }

    .footer {
      font-size: 12px;
      color: #fff;
    }

    .footer a {
      text-transform: uppercase;
      color: red;
    }

    @media only screen and (max-width:360px) {
      .cta-button .btn-holder {
        font-size: 18px !important;
      }

      .footer-social-table {
        width: 100%;
      }

      .social-list img {
        width: 50px;
      }
    }

    @media only screen and (max-width:768px) {
      .wrapper {
        overflow: hidden;
      }

      .section {
        display: inline-block;
        margin: 0;
        margin-top: 15px;
        text-align: center;
      }

      .pic .content {
        width: 100%;
      }

      .section .home {
        width: 65%;
      }



      .desc-container {
        width: 100%;
      }

      .desc-table {
        margin: 0 auto;
      }

      .desc-table .h3 {
        font-size: 20px;
      }

      .desc-table .price {
        font-size: 24px;
      }

      .size {
        font-size: 20px;
      }

      .section .button-container {
        margin-top: 25px;
        margin-bottom: 25px;
        width: 100%;
      }

      .button-container .button-table {
        margin: 0 auto;
        padding-bottom: 25px;
      }

      .outer-table-2 {
        width: 100%;
      }

      .cta-button .btn-holder {
        font-size: 23px;
      }

      .outer-table-3 {
        width: 100%;
      }

      .footer-social-table {
        width: 100%;
      }

      .social-list {
        padding: 0;
      }
    }
  </style>
</head>

我认为这是因为 @media 屏幕，它必须是“@media only screen”或“@media (){...”，但其中 none 做了任何事情.

我的预期（运行在网络浏览器上）与实际发生的情况（gmail 应用程序）

下面是整个代码的 link： JSFiddle

即使帮不上忙，也感谢您的阅读。

更新！！！
感谢 Digital_Frankenstein，我能够解决这个问题。我应该做的是在我的 CSS 上添加一些 !important 标签，特别是在媒体查询上。对于未来的 HTML 电子邮件开发者，请不要忘记这一点。因为这真的很重要。

Answer 1

我花了一些时间来调试这个，逐节取出。我讨厌头脑中的默认样式。使调试变得更加困难，但每个人都有自己的调试方式，我知道很多人因为 Gmail 更新而转向这种方法。

要解决您在 Gmail 中的问题：

您需要将 !important 添加到所有媒体查询 CSS，以覆盖默认样式。
您的口号-hr 将所有内容都推出去，因为它的基本宽度为 vh。在您的媒体查询中，我添加了 width:90%!important;.
您需要减小最后一个按钮的字体大小。它在 Gmail 中以 23px 的速度爆炸。我可能会建议 20px？
您的页脚看起来不太好。最好 fiddle 再进一步，因为两个项目都紧贴边缘看起来不太好。

最后，如果您对它不是完全有信心，我建议您避免使用这种技术。我个人看不到它的价值，因为 Gmail 开始呈现响应式代码，但我知道一些开发人员将它用于离群的移动电子邮件客户端，这是有道理的。但我坚持使用老式表格，因为它可以正常工作，而且我的客户将管理模板。如果我总是可以更新和管理我构建的模板，那么它就有意义了。只是一些值得思考的东西。希望这能解决您的问题:)

为什么 gmail 不响应媒体查询？

Why is gmail not responding to media-queries?

html

gmail

html-email

media-queries

responsive