HTML 电子邮件响应答案

【问题标题】：HTML Email ResponsiveHTML 电子邮件响应
【发布时间】：2021-12-25 21:31:50
【问题描述】：

大家好，我想为我的代码创建两个版本，一个用于桌面，另一个用于移动。

这是因为我需要将一些文本和图像更改为移动方面的桌面版本。

作为我尝试过的一个例子。

如果有人知道我该如何解决这个问题，请帮助我。

<style>
  .desktop {
    display: none;
  }
  <!-- Small devices -->@media screen and (max-width: 480px) {
    .mobile {
      display: block;
    }
  }
</style>

<body>
  <div class="desktop">
    <table bgcolor="#0d0d0d" width="620" align="center" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td bgcolor="#0d0d0d" align="center">
          <table align="center" bgcolor="#0d0d0d" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td align="center" bgcolor="#0d0d0d">
                <!--Image Version 1 Desktop -->
                <img src="CarImage_v1.png" style="display:block; border:0" />
              </td>
            </tr>
            <tr>
              <td align="center" bgcolor="#0d0d0d">
                <!-- Car Text  Version 1 Desktop -->
                <p style="font-family: Arial; color:#c2c2c2; font-size:20px;">
                  Superior en todo. <br/> Incluso en clase.
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  <div class="mobile">
    <table bgcolor="#0d0d0d" width="620" align="left" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <table align="center" bgcolor="#0d0d0d" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td align="center" bgcolor="#0d0d0d">
                <!--Image Version 2 Mobile -->
                <img src="CarImage_v2.png" style="display:block; border:0" />
              </td>
            </tr>
            <tr>
              <td align="center" bgcolor="#0d0d0d">
                <!-- Car Text Version 2 Mobile -->
                <p style="font-family: Arial; color:#c2c2c2; font-size:20px;">
                  Cuando la deportividad y <br/> la clase se entiende
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>

--- 我想要的 ----

桌面版

手机版

【问题讨论】：

“我想为我的代码创建两个版本，一个用于桌面，另一个用于移动。” - 您不能也不应该，因为您不知道您的 HTML 电子邮件是否会在移动设备或台式机/笔记本电脑上打开。
您知道 Desktop Outlook 的 HTML 呈现很糟糕，自 2007 年以来就冻结了？
嗨@Dai，你是对的，但是如果我想从移动和桌面更改文本版本和图像，我该怎么办？
您到底在改变什么，为什么？为什么不能在两种情况下使用相同的图像？
首先@Dai，在我的示例中，我有一张带有桌面版文本的图片，因此当时事通讯显示移动版时，我需要将之前的图片更改为新图片及其文本。

标签： html css html-table responsive-design html-email

【解决方案1】：

As of late 2021, you can safely use @media in HTML emails' stylesheets 可根据电子邮件软件的视口大小更改 HTML 电子邮件的样式、布局和在一定程度上：内容 - 这可作为移动与桌面用例的充分代理。

_{请注意，截至 2021 年 11 月，上面链接的 CanIEmail.com 页面目前描述了 36% 的电子邮件程序完全支持 @media 规则，接下来的 39% 的电子邮件程序仅部分支持@media的程序（但它们仍然支持我们需要的：min/max-width）。这只是 75% 的支持...然而：我们只需要所有移动电子邮件应用程序来支持@media：桌面电子邮件没关系应用程序支持与否 - 这就是为什么可以使用它的原因。}

唯一的保留是用于 Windows 桌面的 Office Outlook，但这很好，因为您可以将“桌面”版本设置为样式表中的默认值。

类似这样的：

img {
    border: 0;
    margin: 0;
}

p {
    font-family: Helvetica, Arial, sans-serif;
    color: #c2c2c2;
    font-size: 20px;
}

/* By default, assume a desktop browser or e-mail client: */
/* (As all mobile e-mail viewers do support (at least basic) CSS media queries. */

.mobileOnly {
    display: none;
}

@media (max-width: 767px) {
/* Assume mobile devices are < 768px wide (as the original iPad in portrait was 768px wide, I assume you want desktop view for large tablets) */

    
    .desktopOnly {
        display: none;
    }
    .mobileOnly {
        display: block;
    }
    span.mobileOnly {
        display: inline;
    }
}

<div class="desktopOnly">
    <img src="CarImage_v1.png" />
    <p>Superior en todo. <br/> Incluso en clase.</p>
</div>

<div class="mobileOnly">
    <img src="CarImage_v2.png" />
    <p>Cuando la deportividad y <br/> la clase se entiende</p>
</div>

但是，正如我在 cmets 中提到的，您不需要为每个设备分别设置 <img /> 和文本内容。在您的情况下，图像本身看起来相同，只是缩放和裁剪，在这种情况下，在小屏幕@media 部分的img 规则中使用object-fit。并且文字可以用<span>控制：

img#carImage {
    object-fit: contain;
}

@media (max-width: 767px) {
    
    img#carImage {
        object-fit: cover;
    }
}

还可以考虑使用transform: scale 和clip 以获得其他效果。

...并且文本可以使用<span class="mobileOnly"> 显示/隐藏，如下所示：

<div>
    <img id="carImage" src="CarImage.png" />
    <p>
        <span class="desktopOnly">Superior en todo. <br/> Incluso en clase.</span>
        <span class="mobileOnly">Cuando la deportividad y <br/> la clase se entiende</span>
    </p>
</div>

【讨论】：

所以，据我了解，可以将媒体查询链接到 Outlook 桌面吗？因为它似乎不起作用
@javi-ur96 不，您仍然不能在桌面 Outlook 中使用 @media但这没关系，因为我的答案中的样式表将桌面 视为默认，并且仅在电子邮件应用程序/浏览器支持@media 并且所有移动设备都支持它时才切换移动/小屏幕布局。这就是它起作用的原因。

【解决方案2】：

@javi-ur96，

据我了解，您要做的就是根据屏幕尺寸显示移动版本或桌面版本。

您可以使用javaScripts 函数，只需利用else if 条件根据屏幕大小呈现页面。

但我认为这不是一个好习惯。而是选择以下选项。

利用 grid 属性使相同的内容成为响应式。因此，您将节省大量文件大小和编码。

您可以在此LINK 中找到适合您需求的优秀示例。
与其在桌面或移动设备上切换 div 元素，不如只创建它的一个版本并尝试根据屏幕大小切换它们的属性。

您可以在下面找到示例链接：

Typical Media Query Breakpoints 您还可以根据需要显示不同尺寸的图像。
Responsive Web Design using Media Query 这向您展示了应该如何构建您的网站。

【讨论】：

这个问题被专门标记为 html-email。您应该意识到，电子邮件客户端对 JS 的支持很差。大部分客户端（Outlook、Windows 10 邮件、microsoft office、gmail imap app、T-online 和 AOL）也不支持媒体查询。所以你的答案对这个问题没有任何帮助（特别是因为 OP 已经尝试使用 medi 查询）。
@tacoshy 所有官方 GMail 客户端都支持基本的@media 规则。唯一不支持@media查询的电子邮件程序都是桌面浏览器（Outlook 2007-2019、Windows 10 Mail（谁在使用它？）），因此使用@media定位移动/电话/小型-屏幕设备是完全可以接受的。还有像 ProtonMail 这样的少数人坚持，但 ProtonMail 用户可能完全禁用了 HTML 电子邮件，所以这没有实际意义。