所以我正在为我的公司构建一些新的模板用于电子邮件广播，并且在移动电子邮件客户端遇到了一些麻烦。具体来说，我的文字在Android和iOS中变得太小了。
现在，我可以根据需要使用我的媒体查询来定位iOS，并根据我的需要调整字体大小，但据我所知，这对于Android来说是不可能的，这让我留下了非常小的文字。
我的代码在下面，我遇到的主要部分是bodyleft单元格，其中字体大小是标准的16像素，并且除了移动外，看起来很好。 -webkit-text-size-adjust：none;没有使用，因为我想要调整大小，无论如何它并没有在这种情况下有所作为。
非常感谢任何帮助，谢谢！
<style type="text/css">
td img {
display: block;
}
.ExternalClass * {
line-height: 100%;
}
@media screen and (max-width: 600px) {
body[yahoo] .border {
width:98% !important;
min-width:auto !important;
}
body[yahoo] .main {
width:100% !important;
}
body[yahoo] .body {
width:90% !important;
}
body[yahoo] .spacer {
display: none !important;
}
body[yahoo] .footer {
width:90% !important;
}
body[yahoo] .bodyleft {
float: left;
margin-bottom: 20px;
}
body[yahoo] .bodyright {
float: left;
width:100% !important;
}
body[yahoo] img {
height: auto !important;
}
body[yahoo] .sideimagesa {
float:left;
width:48% !important;
margin-bottom:10px !important;
}
body[yahoo] .sideimagesb {
float:right;
width:48% !important;
margin-bottom:10px !important;
}
}
</style>
</head>
<body yahoo="fix" style="margin:0px;" bgcolor="#EF9A9A">
<div>
<table style="border-collapse:collapse;" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#EF9A9A" style="padding-top:20px; padding-bottom:20px;"><table class="border" style="width:660px; min-width:660px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td bgcolor="#F44336">
<table class="main" style="width:650px; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF">
<table class="main" style="width:650px; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="header" style="font-family:Arial, Helvetica, sans-serif;" align="center"><img style="display:block" src="http://images.theonlineimages.com/ima/650x200.jpg" alt="" width="100%" /></td>
</tr>
<tr>
<td class="headline" style="padding-top:15px; padding-bottom:15px;" align="center" bgcolor="#F44336"><strong><a style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#ffffff; text-decoration:none;" href="http://en.wikipedia.org">This Can Be Your First Call to Action Link</a></strong></td>
</tr>
<tr>
<td style="padding-top:20px;">
<table class="body" style="width:625px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="bodyleft" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#212121; line-height:22px;" valign="top">Any text you want to include to explain what you are offering would be placed here. This includes any and all incentives. The text can be <strong>bolded</strong> or <em>italicized</em> for emphasis. Individual segments of text can also have their sizes and colors changed in order to add emphasis that way.<br />
<br />
<strong><span style="color:#B71C1C">Header Text</span></strong> <br />
<br />
You can use headers to separate your ideas, and have <a style="color:#B71C1C" href="#">hyperlinks</a> throughout your text. Pictures on the right side can be used to show off what you are advertising. Greater or fewer images can be included, and they can be switched to the left side if preferred. Images will be entered at the exact widths shown, but heights can vary without issue.
<br />
<ul style="margin-top:19px;margin-bottom:19px;">
<li>A bullleted or numbered list</li>
<li>can be used</li>
<li>to itemize your text</li>
</ul>
All colors are completely up to you. This includes links, text, borders and backgrounds. Each of these can be changed to whatever color you like.<br />
<br />
<table style="border-collapse:collapse;" class="cta" width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td align="center" bgcolor="#F44336"><a style="font-family:Arial, Helvetica, sans-serif; font-size:36px; color:#ffffff; text-decoration:none; line-height:42px;" href="http://en.wikipedia.org"><strong>Press Here if You Want to
Learn More</strong></a></td>
</tr>
</table></td>
<td class="spacer" style="width:20px;"> </td>
<td class="bodyright" style="width:210px;" valign="top"><table class="sideimagesa" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesb" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesa" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table>
<table class="spacer" border="0" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td height="20"> </td>
</tr>
</table>
<table class="sideimagesb" border="0" cellpadding="5" cellspacing="0" style="width:100%; border-collapse:collapse;">
<tr>
<td bgcolor="#F44336"><table style="width:100%; border-collapse:collapse;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor="#BDBDBD" style="font-family:Arial, Helvetica, sans-serif;"><span class="header" style="font-family:Arial, Helvetica, sans-serif;"><img style="display:block" src="http://images.theonlineimages.com/ima/200x125.jpg" alt="" width="100%" /></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td style="padding-top:20px; padding-bottom:20px;"><table class="footer" style="width:625px; margin:auto; border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#212121" align="center">You can put disclaimers, contact info, or any other footer information you might want to include here</td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：1)
您遇到的Gmail问题与字体大小或字体声明类型无关。实际上，使用上一个答案中显示的EM或关键字可能会破坏您的设计/布局，因为它们在客户端之间不一致（默认大小各不相同 - 请参阅此处的支持答案：In email templates, should font-size be in pt or px?）。
问题是你声明的宽度为660像素，比手机宽得多，所以为了使它适合屏幕而不需要水平滚动，它会“缩小”电子邮件，缩小所有的电子邮件。电子邮件中的元素。 Gmail会忽略样式表中列出的所有内容，这意味着所有媒体查询都会变得无用。
为了防止出现这种情况，您应该使用百分比在移动优先设计环境中进行设计，然后使用媒体查询等对其进行样式设置以适合桌面。
此类电子邮件的良好资源：http://labs.actionrocket.co/the-hybrid-coding-approach-2
关于可接受的CSS的良好资源：https://www.campaignmonitor.com/css
示例代码的Codepen：http://codepen.io/actionrocket/pen/EoCLH
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style=" display:block; max-width:640px !important;" bgcolor="#ffffff">
<tr>
<td>
<table id="holder" class="wrapper" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:640px !important;" align="center">
<tr><td align="center">
<!--[if mso]>
<table id="outlookholder" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td>
<![endif]-->
<!--[if (IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="640" align="center"><tr><td>
<![endif]-->
<!--2 column-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="20"></td>
<td width="280" bgcolor="#ededed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
<tr>
<td width="15"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="320" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="20"></td>
<td width="280" bgcolor="#ededed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
<tr>
<td width="15"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr></table>
<!--[if mso]>
</td></tr></table>
<![endif]-->
<!--[if IE]>
</td></tr></table>
<![endif]-->
</td></tr></table>
</td></tr></table>