Question

StackOverflow有什么用？我一直在试图找出最长的一段时间，为什么Gmail无法在我的HTML电子邮件的媒体查询中使用。宽屏下看起来不错，但是Gmail无法响应我手机的屏幕宽度，因此手机上看起来很奇怪和有问题。

我已经尝试研究类似的问题，甚至尝试将CSS重写到我多次重写CSS的地步，以查看媒体查询是否能吸收最小的变化。 / p>

<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屏幕”或“ @media（）{...”），但是这些都不做。

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

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

即使您不能帮助，也感谢您阅读。

更新！
感谢Digital_Frankenstein，我得以解决此问题。我应该做的是在CSS上添加一些!important标签，尤其是在媒体查询上。对于将来的HTML Email Dev，请不要忘记这一点。因为这真的很重要。

Answer 1

花了我一点时间来调试它，逐节介绍。我讨厌头上的默认样式。调试起来变得非常困难，但是由于Gmail更新，每个人都需要自己调试，而且我知道很多人都在转向这种方法。

要解决Gmail中的问题，

您需要在所有媒体查询CSS中添加！important，以覆盖默认样式。
您的口号-hr是因为vh基本宽度而将所有内容都推出了。在您的媒体查询中，我添加了width：90％！important;。
您需要减小最后一个按钮的字体大小。 Gmail中的像素为23px。我可能会建议20px？
您的页脚看起来不太好。最好是再摆弄一下，因为两个项目都靠在边缘看起来不太好。

最后，如果您对这项技术不完全自信，我建议您避免使用此技术。自从Gmail开始呈现自适应代码以来，我个人看不到它的价值，但是我知道有些开发人员将其用于异常的移动电子邮件客户端，这是有道理的。但是我坚持使用旧的课桌，因为它可以工作，并且我的客户将管理模板。如果我始终可以更新和管理自己构建的模板，那么这很有意义。只是需要一些思考。希望这能解决您的问题：）

为什么gmail无法回应媒体查询？

1 个答案: