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

【问题标题】：Why is gmail not responding to media-queries?为什么 gmail 不响应媒体查询？
【发布时间】：2019-09-18 15:28:44
【问题描述】：

StackOverflow 有什么好的？很长一段时间以来，我一直在试图弄清楚为什么 Gmail 没有接受我的 HTML 电子邮件的媒体查询。宽屏看起来不错，但 Gmail 没有响应我手机的屏幕宽度，所以手机看起来很奇怪而且有问题。

我已经尝试过查看类似的问题，甚至尝试将我的 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 (){...”，但这些都没有做任何事情。

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

下面是整个代码的链接： JSFiddle

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

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

【问题讨论】：

好的，所以我做了一个更简单的版本来测试Gmail是否能够使用媒体查询<style type="text/css"> div[class="wrapper"]{background: red; height: 120px;} @media (max-width:1080px) { div[class="wrapper"]{background:blue;} } </style>它仍然无法正常工作......

标签： html gmail media-queries html-email responsive

【解决方案1】：

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

要解决您在 Gmail 中的问题：

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

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

【讨论】：

我添加了!important，它成功了！我还接受了您的设计建议，并将底部徽标和页脚文本放在页脚区域的底部。太感谢了！你不知道你为我减轻了多少压力。
有什么我可以阅读或观看的东西，以便我了解老式方法吗？
Gmail 剪辑电子邮件，如果它超过，我认为，120kb。因此，请注意电子邮件的大小。很适合缩小。
@KuyaDanny Nicole Merline 去年写了这篇文章 - webdesign.tutsplus.com/articles/… 否则，Litmus 有这个可能有用的旧信息图 - litmus.com/blog/html-email-coding-101-infographic 祝你好运！