我是响应式设计的新手，所以我提前道歉。我正在收集当前的电子邮件，并使其中的一部分响应。我有一个3列的电子邮件，并希望它堆叠到一列，并使文本更大。我通过浏览器获得了成功的结果，但是一旦我在iPhone 5上查看它，我什么也得不到。我已发送到AOL，Gmail和Outlook帐户，但没有人对这一列做出反应。我在下面列出了我的风格。再说一遍，我对整个媒体查询都不熟悉，所以如果它看起来很荒谬我会道歉。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@media only screen and (max-width: 660px) {
table.container {width: 100% !important; padding:0 4px;}
table.container {
text-align: center !important;
font-size:20px !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
}
}
@media only screen and (max-width: 568px) {
table.container {width: 100% !important; padding:0 4px;}
table.container {
text-align: center !important;
font-size:20px !important;
}
.templateColumnContainer {
display:block !important;
width:100% !important;
}
}
@media only screen and (max-width: 480px) {
table.container {width: 100% !important; padding:0 4px;}
table.container {
text-align: center !important;
font-size:20px !important;
}
.templateColumnContainer {
display:block !important;
width:100% !important;
}
}
@media only screen and (max-width: 320px) {
table.container {width: 280px !important; padding:0 4px;}
table.container {
text-align: center !important;
font-size:20px !important;
}
.templateColumnContainer {
display:block !important;
width:100% !important;
}
}
</style>
</head>
所有do not support媒体查询Gmail，AOL和Outlook.com。尝试将其发送到iPhone上的默认邮件阅读器。
改为流体设计是明智的。 1.创建100％宽度的包装表。 2.嵌套宽度为100％的容器表。但是有一个表格单元格，其宽度和最大宽度保持邮件设计宽度。一定要在此TD上放置一个align = center。
在此容器表中，您可以开始构建邮件。使用align属性创建在视口更改后移动的元素。
实际上，您可以对某些移动设备使用媒体查询。放入头部，您可以根据视口更改使用媒体查询。
使您的电子邮件快速响应的最佳方式：添加元数据：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />
如果你需要用于outlook的sans-serif字体，那就把它放在头部和头部：
<!--[if mso]>
<style type="text/css">
h1, h2, h3, h4, h5, h6, p, a, span, td, em, strong {
font-family: Helvetica, Arial, sans-serif;
}
</style>
<![endif]-->
制作基于表格的设计。
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
<tbody>
<tr>
<td valign="middle" align="center">
<table class="fullwidth" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;">
<tbody>
<tr>
<td style="font-size:5px;line-height:5px; height: 10px"> </td> <!-- paddign & margin not supported by Outlook -->
</tr>
<tr>
<td valign="middle" align="center">
<!-- Add fun here -->
</td>
</tr>
<tr>
<td style="font-size:5px;line-height:5px; height: 10px"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
在需要在媒体查询中填充完整大小的表上添加类fullwidth（例如480）：
@media only screen and (max-width: 480px){
.fullwidth,
.fullwidth tbody,
.fullwidth tbody > tr,
.fullwidth tbody > tr > td,
.fullwidth tbody > tr > th,
table[class=fullwidth],
table[class=fullwidth] tbody,
table[class=fullwidth] tbody > tr,
table[class=fullwidth] tbody > tr > td,
table[class=fullwidth] tbody > tr > th
td[class=main-border] {
max-width: 100% !important;
min-width: 100% !important;
width: 100% !important;
display: block !important;
clear: both;
margin: 0 auto !important;
}
}
图像src必须带有HTTPS的绝对地址（谷歌代理）
我建议使用流体混合方法。使用嵌套表列使用max-width以及支持它们的客户端的媒体查询。