Question

我已经构建了一个html电子邮件，这在雅虎是完美的，但不是在Gmail中。由于gmail不支持标题样式，我将如何添加媒体查询。但是我收到了很多电子邮件，这些邮件在gmail mobile中都有响应他们是怎么做到的？方式是什么？

Answer 1

首先构建电子邮件以适应gmail应用，然后使用媒体查询和条件代码使其在其他所有内容中都能正常工作。

移动优先设计是在gmail应用中制作自适应电子邮件的唯一方式 - 请参阅优秀示例here

Answer 2

混合设计可在不使用媒体查询的情况下实现响应式变形布局。从本质上讲，它使用最大宽度和最小宽度来施加刚性基线（允许一些移动），并为Outlook提供固定的宽宽度，无论如何都要绑定到桌面。一旦设置了适合移动设备的基线，媒体查询就会在支持它的客户端（如iOS Mail）中逐步增强电子邮件。

以下是来自Fabio Carneiro's code samples on GitHub的基本双柱脚手架（全部归功于他！）：

<!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>

该回购和其他地方有更多的脚手架和模式，但这显示了行动的基本原则。

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

2 个答案: