电子邮件 HTML/CSS 桌面和移动成像答案

【问题标题】：Email HTML/CSS desktop and mobile imaging电子邮件 HTML/CSS 桌面和移动成像
【发布时间】：2017-02-15 23:53:33
【问题描述】：

在查看桌面和移动设备时，我的图像交换代码遇到了问题。它似乎适用于某些平台，但不适用于 Android 移动设备和某些版本的 Outlook。我能得到一些帮助吗？

    <style>

.visible-mobile {
  display: none !important;
}

@media (max-width: 489px) {
  .visible-mobile {
    display: inline !important;
  }

  .hidden-mobile {
    display: none !important;
  }
}

</style>

还有内容

<img src="https://thumb9.shutterstock.com/display_pic_with_logo/839950/117069988/stock-photo-dog-listening-with-big-ear-117069988.jpg" style="width: 100%; max-width: 600px; border: none; height: auto;" alt="houdini" class="visible-mobile">

<img src="https://thumb1.shutterstock.com/display_pic_with_logo/2997419/259670459/stock-photo-happy-dog-with-tongue-out-and-head-tilt-259670459.jpg" style="width: 100%; max-width: 600px; border: none; height: auto;" alt="houdini" class="hidden-mobile">

【问题讨论】：

“不工作”不是一个技术术语。什么不工作以及如何工作？该标记是否显示了问题？
minimal reproducible example 请..
电子邮件中的 HTML 和 CSS 具有糟糕的支持和一致性。媒体查询充其量只是一个长镜头。根据经验，如果一项技术在 2010 年左右在网络上被认为是“先进的”，那么今天它可能仍然是电子邮件中的禁忌。

标签： html css responsive-design html-email

【解决方案1】：

我添加了一个类

<style>

.visible-mobile {display: none !important;}
.hidden-mobile{display:none !important;} /* new class added*/

@media screen and (max-width:489px){
  .visible-mobile {
    display: block !important;
/* change inline to block */
  }

  .hidden-mobile {
    display: none !important;
  }
}

</style>

桌面图像保持原样

<img src="https://thumb9.shutterstock.com/display_pic_with_logo/839950/117069988/stock-photo-dog-listening-with-big-ear-117069988.jpg" style="width: 100%; max-width: 600px; border: none; height: auto;" alt="houdini" class="visible-mobile">

手机版有outlook的条件语句。

试一试上述更改。

干杯

【讨论】：

尝试将@media更改为@media screen and (max-width:489px)
克里斯我更新了我的代码，所以它现在应该可以工作了。基本上，除了 Outlook 之外，移动图像现在应该全部显示。 scoopzilla 我也添加了正确的媒体查询。

【解决方案2】：

您的代码有效。问题是您试图在不支持它们的 Outlook 中调用媒体查询。目前，很少有电子邮件客户端支持这种 HTML（Apple Mail、Outlook for Mac 和 iOS Mail 几乎都可以命名）。

对于电子邮件，您几乎需要内联编写所有 CSS。

【讨论】：

作为一个从事大量电子邮件开发工作的人，我对 Litmus 的推荐再怎么不过。他们花费大量精力测试不同的电子邮件客户端。
你不需要做所有的内联 CSS。
Outlook 和 Gmail 都从 <head> 元素中去除 CSS。因此，如果您希望您的电子邮件不仅在 iOS 邮件上看起来不错，那么是的，您可以做到。
我不同意，但我猜这是见仁见智。
但是你可以Gmail supported CSS

【解决方案3】：

您可以将元素周围的<!--[if gte mso 9]> 包装器与添加这些元素结合使用，以有效地添加对 Outlook 的 CSS 支持。它并不完美，Outlook 2010 和 2013 仍然存在问题。

还有一个关于这个主题的教程here。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="*|MC:SUBJECT|*">
<title>*|MC:SUBJECT|*</title>
<style type="text/css">
		#outlook a{
			padding:0;
		}
		.ReadMsgBody{
			width:100%;
		}
		body{
			width:100% !important;
			min-width:100%;
			-webkit-text-size-adjust:100%;
			-ms-text-size-adjust:100%;
		}
		.ExternalClass{
			width:100%;
		}
		td{
			border-collapse:collapse !important;
		}
		v*{
			behavior:url(#default#VML);
			display:inline-block;
		}
		.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
			line-height:100%;
		}
    </style>
    </head>

祝你好运！电子邮件营销是有益的，也是邪恶的。

【讨论】：