<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css">
ReadMsgBody{ width: 100%;}
.ExternalClass {width: 100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body {-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;margin:0 !important;}
p { margin: 1em 0;}
table td { border-collapse: collapse;}
img {outline:0;}
a img {border:none;}
p {margin: 1em 0;}
@-ms-viewport{ width: device-width;}
@media only screen and (max-width: 300PX) {
body[yahoo] .container { width:100% !important; }
body[yahoo] .footer { width:auto !important; margin-left:0; }
body[yahoo] .content-padding{ padding:4px !important; }
body[yahoo] .mobile-hidden { display:none !important; }
body[yahoo] .logo { display:block !important; padding:0 !important; }
body[yahoo] img { max-width:100% !important; height:auto !important; max-height:auto !important;}
body[yahoo] .header img{max-width:100% !important;height:auto !important; max-height:auto !important;}
body[yahoo] .photo img { width:100% !important; max-width:100% !important; height:auto !important;}
body[yahoo] .drop { display:block !important; width: 100% !important; float:left; clear:both;}
body[yahoo] .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both;}
body[yahoo] .nav4, body[yahoo] .nav5, body[yahoo] .nav6 { display: none !important; }
body[yahoo] .tableBlock {width:100% !important;}
body[yahoo] .responsive-td {width:100% !important; float:left !important; padding:0 !important; }
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body { padding: 0px !important; font-size: 16px !important; line-height: 150% !important;}
h1 { font-size: 22px !important; line-height: normal !important;}
h2 { font-size: 20px !important; line-height: normal !important;}
h3 { font-size: 18px !important; line-height: normal !important;}
.buttonstyles {
font-family:arial,helvetica,sans-serif !important;
font-size: 16px !important;
color: #FFFFFF !important;
padding: 10px !important;
}
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
}
@media only screen and (max-width: 640px) {
body[yahoo] .container { width:100% !important; }
body[yahoo] .mobile-hidden { display:none !important; }
body[yahoo] .logo { display:block !important; padding:0 !important; }
body[yahoo] .photo img { width:100% !important; height:auto !important;}
body[yahoo] .nav5, body[yahoo] .nav6 { display: none !important;}
.fluid, .fluid-centered {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}
}
</style><!--[if mso]> <style type="text/css"> /* Begin Outlook Font Fix */ body, table, td { font-family: Arial, Helvetica, sans-serif ; font-size:16px; color:#808080; line-height:1; } /* End Outlook Font Fix */ </style> <![endif]--></head><body bgcolor="#ffffff" text="#000000" style="background-color: #FFFFFF; color: #000000; margin: 0px; padding: 0px; -webkit-text-size-adjust:none;" yahoo="fix"><table width="100%" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td align="center" valign="top"><div style="margin:18px 0;">
<!-- END Table use to set width of email --></div>
<!--End Navi Bar-->
</td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner" style="padding-top: 10px;padding-right: 10px;padding-left: 10px;"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%; padding-right: 5px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tr><td>
<img data-assetid="31498" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0dbebd2d-e383-4fb3-b7d2-775d5e3b437c.jpg" height="337" width="256" style="height:337px;width:256px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"></td></tr></table></td></tr></table></td>
<td class="responsive-td" valign="top" style="width: 50%; padding-left: 5px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
@media only screen and (max-width: 500px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
@media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_eggo.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td>
<td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_motts.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias="">
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_honey_nut_cheerios.jpg" alt="" width="128" height="168" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
@media only screen and (max-width: 500px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
@media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_progresso.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="168" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td>
<td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_metamucil.jpg" alt="" width="128" height="168" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias="">
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_green_giant_beans.jpg" alt="" width="128" height="168" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
@media only screen and (max-width: 400px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
@media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0"><tbody><tr><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Holderolay.jpg" alt="" width="120" height="120" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="120" height="120" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td>
<td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Mission.jpg" alt="" width="120" height="120" border="0" class=""></a></td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="120" height="120" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/ReddyWhip.jpg" alt="" width="120" height="120" border="0" class=""></a></td>
<td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias=""><img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/images.jpg" alt="" width="120" height="120" border="0" class=""></a></td><td class="section" width="128" height="128" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #FFF;"></td><td align="center"><a href="" target="_blank" style="text-decoration:none;" alias="">
<img src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Kraft.jpg" alt="" width="120" height="120" border="0" class=""></a></td></tr></tbody></table></td></tr></tbody></table><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner" style="padding: 10px;"><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td><table cellspacing="0" cellpadding="0" style="width: 100%;"><tbody><tr><td class="responsive-td" valign="top" style="width: 50%; padding-right: 3px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><style>
/* Gridblock with Title Sections Pattern CSS */
@media only screen and (max-width: 500px) {
table[class="pattern"] table { width: 100%; }
table[class="pattern"] .spacer { display: none; }
table[class="pattern"] .section-title,
table[class="pattern"] .section-row {
display: block;
height: auto;
}
table[class="pattern"] .section-title {
width: 100%;
padding: 20px 0;
margin-bottom: 8px;
}
table[class="pattern"] .section-row { width: 100%; }
table[class="pattern"] .section-row .section {
display: block;
float: left;
width: 32%;
height: auto;
margin-left: 2%;
padding: 60px 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table[class="pattern"] .section-row .section:first-child { margin-left: 0; }
}
@media only screen and (max-width: 400px) {
table[class="pattern"] .grid-block { padding-bottom: 0 !important; }
table[class="pattern"] .section-row .section {
float: none;
width: 100%;
margin: 0 0 8px 0;
}
}
</style><table cellpadding="0" cellspacing="0" class="pattern" width="100%"><tbody><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section-row" width="450"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
2
</td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
3
</td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section-row" width="450"><table cellpadding="0" cellspacing="0"><tbody><tr><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
2
</td><td class="spacer" width="8" style="font-size: 1px;"> </td><td class="section" width="144" height="144" align="center" valign="middle" style="font-family: arial,sans-serif; font-size: 14px; color: #fff; background: #808080;">
3
</td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="grid-block" width="600" style="padding-bottom: 8px;"><table cellpadding="0" cellspacing="0"><tbody><tr></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td><td class="responsive-td" valign="top" style="width: 50%; padding-left: 3px;"><table cellpadding="0" cellspacing="0" width="100%" class="stylingblock-content-wrapper" style=""><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><table width="100%" cellspacing="0" cellpadding="0"><tbody><tr><td><img data-assetid="31510" src="http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/89c228aa-d401-4f79-ba4b-1f76b230b360.jpg" height="395" width="300" style="height:395px;width:300px;display: block;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody>
</table></td></tr></tbody></table></td>
</tr></table></td></tr></table></td></tr><tr><td valign="top"><center><table cellpadding="2" cellspacing="0" width="600" ID="Table5"><tr><td> </body></html>
我刚为即将推出的广告系列设计了一封电子邮件，但我很难及时对移动设备做出正确回应。当我在Litmus检查时，它不承认任何断点请求帮助。我已附上以下代码：
答案 0 :(得分：0)
对我来说有三件事：
否。 1：您不再需要使用括号来定义此类table[class="pattern"]之类的类。 table.pattern适用于所有电子邮件客户端。
否。 2：
为什么几乎所有内容都以body[yahoo]为前缀？这针对雅虎！邮件，不会在其他任何地方呈现。如果您的媒体查询代码带有这样的前缀，则它将无法在iOS Mail或Gmail App中呈现。
否。 3：
<style>中有很多<body>个标记块。每个电子邮件客户端都不会呈现这些内容，最好将它们移到<head>。