如何在gmail中使html电子邮件响应？答案

【问题标题】：How to make html email responsive in gmail?如何在gmail中使html电子邮件响应？
【发布时间】：2015-07-21 07:11:29
【问题描述】：

我已经建立了一个 html 电子邮件，它在 yahoo 中是完美的，但在 gmail 中却不是。由于 gmail 不支持标题样式，我将如何添加媒体查询。但是我收到了许多在 gmail 手机中响应的电子邮件。他们是怎么做到的？有什么办法？

【问题讨论】：

“响应式”行为在 Gmail 中是不可能的（因为缺乏标头支持），只有“可扩展”的东西。 [链接：litmus.com/blog/…

标签： responsive-design gmail html-email

【解决方案1】：

首先构建适合 gmail 应用的电子邮件，然后使用媒体查询和条件代码使其适用于其他所有应用。

移动优先设计是在 gmail 应用程序中制作响应式电子邮件的唯一方法 - 请参阅很好的示例 here

【讨论】：

【解决方案2】：

混合设计无需使用媒体查询即可实现响应式、变形的布局。它的核心是使用 max-width 和 min-width 来强加刚性基线（允许一些移动），并为无论如何都束缚在桌面上的 Outlook 强加一个固定的宽宽度。一旦设置了适合移动设备的基线，媒体查询会在支持它的客户端（如 iOS 邮件）中逐步增强电子邮件。

这是来自Fabio Carneiro's code samples on GitHub 的基本 2 列脚手架（全归功于他！）：

<!doctype html>
<html>
	<body style="margin:0;">
		<center>
			<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">




				<!-- // 2-COLUMN SCAFFOLD [CENTERING, FLUID] -->
				<tr>
					<td align="center" height="100%" valign="top" width="100%">
						<!--[if mso]>
						<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
						<tr>
						<td align="center" valign="top" width="660">
						<![endif]-->
						<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:660px;">
							<tr>
								<td align="center" valign="top" style="font-size:0;">
									<!--// DEVELOPER NOTES:
										1. Setting font-size:0; is necessary to ensure
										   that there is no extra spacing introduced
										   between the centering divs that wrap each
										   of the columns. //-->

									<!--[if mso]>
									<table align="center" border="0" cellspacing="0" cellpadding="0" width="660">
									<tr>
									<td align="left" valign="top" width="330">
									<![endif]-->
									<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
										<!--// DEVELOPER NOTES:
											1. To have each column center upon stacking,
											   wrap them in individual divs, set the same
											   max-width and width as the table within it,
											   and set display to inline-block; using
											   vertical-align is optional.

											2. Setting min-width determines when the two
											   columns of this block will wrap; in this
											   case, when the total available width is
											   less than or equal to 480px. //-->

										<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
											<tr>
												<td align="center" valign="top">
	
													<!-- // REPLACE WITH BLOCK -->
													<p style="background-color:#2BAADF; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">LEFT</p>
													<!-- REPLACE WITH BLOCK // -->
	
												</td>
											</tr>
										</table>
									</div>
									<!--[if mso]>
									</td>
									<td align="left" valign="top" width="330">
									<![endif]-->
									<div style="display:inline-block; max-width:50%; min-width:240px; vertical-align:top; width:100%;">
										<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:330px;">
											<tr>
												<td align="center" valign="top">
	
													<!-- // REPLACE WITH BLOCK -->
													<p style="background-color:#51BBE5; color:#FFFFFF; font:16px Helvetica, sans-serif, normal; margin:0 !important; padding:10px;">RIGHT</p>
													<!-- REPLACE WITH BLOCK // -->	
	
												</td>
											</tr>
										</table>
									</div>
									<!--[if mso]>
									</td>
									</tr>
									</table>
									<![endif]-->
								</td>
							</tr>
						</table>
						<!--[if mso]>
						</td>
						</tr>
						</table>
						<![endif]-->
					</td>
				</tr>
				<!-- 2-COLUMN SCAFFOLD [CENTERING, FLUID] // -->




			</table>
		</center>
	</body>
</html>

在那个 repo 和其他地方有更多的脚手架和模式，但这显示了基本原理。

【讨论】：