我的电子邮件设计不响应移动设备 [英] My Email Design Isn't Responding to Mobile Devices
本文介绍了我的电子邮件设计不响应移动设备的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< pre class =snippet-code-html lang-html prettyprint-override>
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp：// www < html>< head>< META NAME =ROBOTSCONTENT =NOINDEX，NOFOLLOW>< meta name =viewportcontent = width = device-width，initial-scale = 1，maximum-scale = 1，user-scalable = 0/>< meta http-equiv =Content-Typecontent =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-文字大小调整：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仅屏幕和（max-width：300PX）{body [yahoo] .container {width：100％！important; } body [yahoo] .footer {width：auto！important;保证金左：0; } body [yahoo] .content-padding {padding：4px！important; } body [yahoo] .mobile-hidden {display：none！important; } body [yahoo] .logo {display：block！important;填充：0！重要; } body [yahoo] img {max-width：100％！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;最大宽度：100％！重要; height：auto！important;} body [yahoo] .drop {display：block！important;宽度：100％！重要;向左飘浮;明确：两者;}身体[雅虎] .footerlogo {显示：块！重要;宽度：100％！重要;填充顶：15像素;向左飘浮; 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;填充：0！重要; }。流体，。流体为中心{width：100％！important;最大宽度：100％！重要;身高：自动！重要; margin-left：auto！important; margin-right：auto！important; }。流体为中心{margin-left：auto！important; margin-right：auto！important; } / *移动全球风格 - 不要改变* / 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;颜色：#FFFFFF！重要;填充：10px！重要; } / *结束移动全球风格 - 不要改变* /} @media只有屏幕和（最大宽度：640px）{身体[雅虎] .container {宽度：100％！重要; } body [yahoo] .mobile-hidden {display：none！important; } body [yahoo] .logo {display：block！important;填充：0！重要; } 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;最大宽度：100％！重要;身高：自动！重要; margin-left：auto！important; margin-right：auto！important; }。流体为中心{margin-left：auto！important; margin-right：auto！important; }}< / style><！ - [if mso]> < style type =text / css> / *开始Outlook字体修复* / body，table，td {font-family：Arial，Helvetica，sans-serif;字体大小：16px的;颜色：＃808080;行高：1; } / *结束Outlook字体修复* /< / style> <！[endif] - >< / head>< body bgcolor =＃fffffftext =＃000000style =background-color：#FFFFFF; color：＃000000; margin：0px; padding ：0px; -webkit-text-size-adjust：none; yahoo =fix>< table width =100％border =0cellpadding =0cellspacing =0align =center>< tr>< td align = valign =top>< div style =margin：18px 0;><！ - END Table用于设置电子邮件的宽度 - >< / div><！ - End Navi < / tbody>< / table>< table cellpadding =0cellspacing =0width =100％class =stylingblock-content -wrapperstyle =>< tbody>< tr>< td class =styleingblock-content-wrapper camarker-innerstyle =padding-top：10px; padding-right：10px; padding-left ：10px;>< table cellspacing =0cellpadding =0style =width：100％;>< tbody>< tr>< td>< table cellspacing =0 cellpadding =0style =width：100％;>< tbody>< tr>< td class =responsive-tdvalign =topstyle =width：50％; padding-right ：5px;>< table cellpadding =0cellspacing =0width =100％class =stylingblock-content-wrapperstyle =>< tr>< td class = stylingblock化内容wrapp er camarker-inner>< table width =100％cellspacing =0cellpadding =0>< tr>< td>< img data-assetid =31498src =http ：//image.email-nyaaa.com/lib/fe661570736c04747414/m/3/0dbebd2d-e383-4fb3-b7d2-775d5e3b437c.jpgheight =337width =256style =height：337px; width： 256px; display：block; padding-top：0px; padding-right：0px; padding-bottom：0px; < / td>< / tr>< / table>< / td>< / tr>< / table>< / td>< td class = responsive-tdvalign =topstyle =width：50％; padding-left：5px;>< table cellpadding =0cellspacing =0width =100％class =stylingblock-content-wrapperstyle =>< tbody>< tr> ;< td class =styleingblock-content-wrapper camarker-inner>< style> / *带有标题部分的Gridblock模式CSS * / @media仅屏幕和（max-width：500px）{table [class =模式] 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;盒子尺寸：边框; } table [class =pattern] .section-row .section：first-child {margin-left：0; }} @media唯一的屏幕和（最大宽度：400px）{table [class =pattern] .grid-block {padding-bottom：0！important; } table [class =pattern] .section-row .section {float：none;宽度：100％;保证金：0 0 8px 0; }}< / style>< table cellpadding =0cellspacing =0>< tbody>< tr>< td class =sectionwidth =128height =128align = centervalign =middlestyle =font-family：arial，sans-serif; font-size：14px; color：#fff; background：#FFF;>< / td>< td align = center>< a href =target =_ blankstyle =text-decoration：none; alias =>< img src =http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_eggo.jpgalt =width =128height =168 < / tbody>< / tbody>< / t>< / a>< / t>< / tbody>< / tbody>< ;< / table>< table cellpadding =0cellspacing =0width =100％class =stylingblock-content-wrapperstyle =>< tbody>< tr>< td class =stylingblock-content-wrapper camarker-inner>< style> / *具有标题部分的网格模式CSS * / @media唯一屏幕和（最大宽度：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;身高：自动; } table [class =pattern] .section-title {width：100％;填充：20px 0; margin-bottom：8px; } table [class =pattern] .section-row {width：100％; } table [class =pattern] .section-row .section {display：block;向左飘浮;宽度：32％;身高：自动;余量：2％; padding：60px 20px; -moz-box-sizing：border-box; -webkit-box-sizing：border-box;盒子尺寸：边框; } table [class =pattern] .section-row .section：first-child {margin-left：0; }} @media唯一的屏幕和（最大宽度：400px）{table [class =pattern] .grid-block {padding-bottom：0！important; } table [class =pattern] .section-row .section {float：none;宽度：100％;保证金：0 0 8px 0; }}< / style>< table cellpadding =0cellspacing =0>< tbody>< tr>< td class =sectionwidth =128height =128align = centervalign =middlestyle =font-family：arial，sans-serif; font-size：14px; color：#fff; background：#FFF;>< / td>< td align = center>< a href =target =_ blankstyle =text-decoration：none; alias =>< img src =http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/128x168_progresso.jpgalt =width =128height =168 < / tbody>< / tbody>< / t>< / a>< / t>< / tbody>< / tbody>< ;< /表>< / TD>< / TR>< / tbody的>< /表>< / TD>< / TR>< / tbody的>< /表>< / TD> ;< / t>< / tbody>< / table>< table cellpadding =0cellspacing =0width =100％class =stylingblock-content-wrapperstyle => < tbody>< tr>< td class =stylingblock-content-wrapper camarker-inner>< style> / *具有标题部分的网格模式CSS * / @media唯一屏幕和（最大宽度：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;身高：自动; } table [class =pattern] .section-title {width：100％;填充：20px 0; margin-bottom：8px; } table [class =pattern] .section-row {width：100％; } table [class =pattern] .section-row .section {display：block;向左飘浮;宽度：32％;身高：自动;余量：2％; padding：60px 20px; -moz-box-sizing：border-box; -webkit-box-sizing：border-box;盒子尺寸：边框; } table [class =pattern] .section-row .section：first-child {margin-left：0; }} @media唯一的屏幕和（最大宽度：400px）{table [class =pattern] .grid-block {padding-bottom：0！important; } table [class =pattern] .section-row .section {float：none;宽度：100％;保证金：0 0 8px 0; }}< / style>< table cellpadding =0cellspacing =0>< tbody>< tr>< td class =sectionwidth =128height =128align = centervalign =middlestyle =font-family：arial，sans-serif; font-size：14px; color：#fff; background：#FFF;>< / td>< td align = center>< a href =target =_ blankstyle =text-decoration：none; alias =>< img src =http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/Holderolay.jpgalt =width =120height =120 < / tbody>< / tbody>< / t>< / a>< / t>< / tbody>< / tbody>< ;< / table>< table cellpadding =0cellspacing =0width =100％class =stylingblock-content-wrapperstyle =>< tbody>< tr>< td class =stylingblock-content-wrapper camarker-innerstyle =padding：10px;>< table cellspacing =0cellpadding =0style =width：100％;>< tbody> ;< tr>< td>< table cellspacing =0cellpadding =0style =width：100％;>< tbody>< tr>< td class =responsive- td valign =topstyle =width：50％; padding-right：3px;>< table cellpadding =0cellspacing =0width =100％class =stylingblock-content-wrapper style =>< tbody>< tr>< td class =stylingblock-content-wrapper camarker-inner>< style> / *具有标题部分的网格模式CSS * / @media唯一屏幕和（最大宽度：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;身高：自动; } table [class =pattern] .section-title {width：100％;填充：20px 0; margin-bottom：8px; } table [class =pattern] .section-row {width：100％; } table [class =pattern] .section-row .section {display：block;向左飘浮;宽度：32％;身高：自动;余量：2％; padding：60px 20px; -moz-box-sizing：border-box; -webkit-box-sizing：border-box;盒子尺寸：边框; } table [class =pattern] .section-row .section：first-child {margin-left：0; }} @media唯一的屏幕和（最大宽度：400px）{table [class =pattern] .grid-block {padding-bottom：0！important; } table [class =pattern] .section-row .section {float：none;宽度：100％;保证金：0 0 8px 0; }}< / style>< table cellpadding =0cellspacing =0class =patternwidth =100％>< tbody>< tr>< td class =grid-block width =600style =padding-bottom：8px;>< table cellpadding =0cellspacing =0>< tbody>< tr>< td class =spacerwidth =8style =font-size：1px;>& nbsp;< / td>< td class =section-rowwidth =450>< table cellpadding =0 cellspacing =0>< tbody>< tr>< td class =spacerwidth =8style =font-size：1px;>& nbsp;< / td>< ; td class =sectionwidth =144height =144align =centervalign =middlestyle =font-family：arial，sans-serif; font-size：14px; color：#fff ;背景：＃808080;> 2< / td>< td class =spacerwidth =8style =font-size：1px;>& nbsp;< / td>< td class = 144height =144align =centervalign =middlestyle =font-family：arial，sans-serif; font-size：14px; color：#fff; background：＃808080;> 3< / td>< / tr>< / tbody>< / td>< / t>< / td>< / tbody>< / tbody>< ;< tr>< td class =grid-blockwidth =600style =padding-bottom：8px;>< table cellpadding =0cellspacing =0>< tbody> ;< tr>< td class =spacerwidth =8style =font-size：1px;>& nbsp;< / td>< td class =section-rowwidth =450>< table cellpadding =0cellspacing =0>< tbody>< tr>< td class =spacerwidth =8style =font-size：1px ;>& nbsp;< / td>< td class =sectionwidth =144height =144align =centervalign =middlestyle =font-family：arial， sans-serif; font-size：14px; color：#fff; background：＃808080;> 2< / td>< td class =spacerwidth =8style =font-size：1px;>& nbsp;< / td>< td class = 144height =144align =centervalign =middlestyle =font-family：arial，sans-serif; font-size：14px; color：#fff; background：＃808080;> 3< / td>< / tr>< / tbody>< / td>< / t>< / td>< / tbody>< / tbody>< ;< tr>< td class =grid-blockwidth =600style =padding-bottom：8px;>< table cellpadding =0cellspacing =0>< tbody> ;< TR>< / TR>< / tbody的>< /表>< / TD>< / TR>< / tbody的>< /表>< / TD>< / TR> < / tbody>< / table>< / td>< td class =responsive-tdvalign =topstyle =width：50％; padding-left：3px;>< table cellpadding =0cellspacing =0width =100％class =stylingblock-content-wrapperstyle =>< tbody>< tr>< td class =stylingblock-content-wrapper camarker-inner>< table width =100％cellspacing =0cellpadding =0>< tbody>< tr>< td>< img data-assetid =31510src =http://image.email-nyaaa.com/lib/fe661570736c04747414/m/3/89c228aa-d401-4f79-ba4b-1f76b230b360.jpgheight =395width =300style =height：395px ; WIDT h：300px; display：block; padding-top：0px; padding-right：0px; padding-bottom：0px; < / tbody>< / table>< / td>< / tr>< / tbody>< / table><< / tbody>< / tbody< ; / TD>< / TR>< / tbody的>< /表>< / TD>< / TR>< / tbody的>< /表>< / TD>< / TR>< ; / TBODY>< /表>< / TD>< / TR>< /表>< / TD>< / TR>< /表>< / TD>< / TR>< ;>< td valign =top>< center>< table cellpadding =2cellspacing =0width =600ID =Table5>< tr>< td> < / body>< / html>
一个即将到来的活动的电子邮件，但是，我正在与它正确地响应移动设备的艰难时刻。当我在Litmus检查它不承认任何断点pleaseeee帮助。我附上了代码如下：
解决方案三件事情对我来说很重要：
1：你不需要括号来定义clas像这样的 table [class =pattern] 就可以了。 table.pattern 可在所有电子邮件客户端中使用。
无。 2：
为什么几乎所有的前缀都是 body [yahoo] ？这针对雅虎！邮件，并不会在其他地方渲染。如果您的媒体查询代码的前缀是这样的，那么它将不会在iOS Mail或Gmail应用中呈现。
否。 3：
< body> < style> 标签块$ C>。这些不会被每个电子邮件客户端呈现，最好将它们移动到< head> 中。
<!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>
I just designed an email for a upcoming campaign however i'm having a tough time with it responding correctly to mobile devices. When I check it in Litmus it does not acknowledge any breakpoints pleaseeee help. I've attached the code below:
解决方案 Three things stick out to me:
No. 1: You don't need brackets to define classes like this table[class="pattern"] anymore. table.pattern works in all email clients.
No. 2:
Why is almost everything prefixed with body[yahoo]? This targets Yahoo! Mail and won't be rendered anywhere else. If you have your media query code prefixed like this, it won't render in iOS Mail or Gmail App.
No. 3:
There are quite a few <style> tag blocks in the <body>. These won't be rendered by every email client, best to move them into the <head>.
这篇关于我的电子邮件设计不响应移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆