有人请帮忙！我的公司购买了一个电子邮件模板，一切看起来都不错，但现在他们要求我这样做，当电子邮件被视为全尺寸的网页时，它保持在标准的660px。我尝试的每一件事都导致它调整大小但不再响应，反之亦然。我知道这很简单，我知道它是可能的，但我对这个预先购买的模板感到茫然。任何有助于使这个标题媒体响应，但也只有全尺寸到660的帮助表示赞赏。代码
</title>
<style type="text/css">
.Hasna html { width: 640px; }
.Hasna ::-moz-selection{background:#fefac7;color:#4a4a4a;}
.Hasna ::selection{background:#fefac7;color:#4a4a4a;}
.Hasna body { margin: 0; padding: 0; }
.Hasna .ReadMsgBody { width: 640px; background-color: #f1f1f1; }
.Hasna ExternalClass { width: 640px; background-color: #f1f1f1; }
.Hasna a { color:#eb7260; text-decoration: none; font-weight: normal; font-style: normal; }
.Hasna p, .Hasna div, .Hasna span { margin: 0 !important; }
.Hasna table { border-collapse: collapse;}
@media only screen and (max-width: 640px) {
body { width: auto !important;}
body table table{width:100% !important; }
body table[class="table-wrapper"] {width: auto !important; margin: 0px 20px !important;}
body table[class="table-inner"] {width: 100% !important; margin: 0 auto !important;}
body table[class="full"] {width: 100% !important; margin: 0 auto !important;}
body table[class="center"] {margin: 0 auto !important;}
body td[class="center"] {text-align: center !important;}
body td[class="rewrite_padding"] {padding:0px !important; border-left: none !important;}
body img[class="img_scale"] {width: 100% !important; height: auto !Important;}
body img[class="divider"] {width: 100% !important; height: 2px !Important;}
}
@media only screen and (max-width: 479px) {
body { width: auto !important;}
body table table{width:100% !important; }
body table[class="table-wrapper"] {width: auto !important; margin: 0px 20px !important;}
body table[class="table-inner"] {width: 100% !important; margin: 0 auto !important;}
body table[class="full"] {width: 100% !important; margin: 0 auto !important;}
body table[class="center"] {margin: 0 auto !important;}
body td[class="center"] {text-align: center !important;}
body td[class="rewrite_padding"] {padding:0px !important; border-left: none !important;}
body img[class="img_scale"] {width: 100% !important; height: auto !Important;}
body img[class="divider"] {width: 100% !important; height: 2px !Important;}
body td[class="one_third"] {width: 100% !important; display: block !important; padding-bottom: 20px; margin: 0 auto !important; text-align: center !important;}
body td[class="one_third_last"] {width: 100% !important; display: block !important; margin: 0 auto !important; text-align: center !important;}
}
</style><!--[if lt mso 14]>
<style type="text/css">
td span {
font-family: Arial, sans-serif;
}
td a {
font-family: Arial, sans-serif;
}
body {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
<!--[if mso 15]>
<style type="text/css">
td span {
font-family: Arial, sans-serif;
}
td a {
font-family: Arial, sans-serif;
}
body {font-family: Arial, sans-serif !important;}
</style>
<![endif]-->
</head>
<body style="background-color:#ffffff; margin:0; padding:0;">
<!-- START header -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="100%" align="center">
<table ds-data-bg="1" bgcolor="#333333" class="ds-bg-module ele-active" width="100%" border="0" background="https://cs.homecity.com/images/email_icons/newsletterhouse2.jpg" align="center" style="">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://cs.homecity.com/images/email_icons/r" color="#333333" ></v:fill>
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<tbody>
<tr>
<td valign="top" align="center">
<table class="table-wrapper" width="660" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 60px 20px;">
<table class="table-inner" width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">
<table class="full" width="640" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- START OF HEADER FOR LOGO & PREHEADER-->
<tbody>
<tr class="ds-remove" data-remove="ds-remove-1">
<td mc:edit="text_header" class="one_third" width="230" align="left" valign="middle" style=" margin: 0;font-weight: normal; font-size:14px ; color:#ffffff; font-family: 'Nunito', sans-serif; line-height: 18px;mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">Newsletter issue #1</span>
</multiline>
</td>
<td mc:edit="logo" class="one_third" width="180" align="center" valign="top" style="">
<span><a href="#" style="color: rgb(21, 177, 210); border-color: rgb(21, 177, 210);" class="tea14-content-editable"><img src="http://cdn3.homecity.com/inc/skins/pt-1r/schemes/homecity/img/homecity-new-white.png" editable="true" alt="logo" width="250" height="" border="0" style="display: inline-block; border-color: rgb(21, 177, 210); color: rgb(21, 177, 210);"></a></span>
</td>
<td mc:edit="forward" class="one_third_last" width="230" align="right" valign="middle" style=" margin: 0;font-weight: normal; font-size:14px ; color:#ffffff; font-family: 'Nunito', sans-serif; line-height: 18px;mso-line-height-rule: exactly;">
<multiline>
<span><a href="#" style="color:#ffffff; font-weight: normal; text-decoration: none;" class="tea14-content-editable">Web version</a> <a href="#" style="color:#ffffff; font-weight: normal; text-decoration: none;" class="tea14-content-editable">Forward</a></span>
</multiline>
</td>
</tr><!-- END OF HEADER FOR LOGO & PREHEADER-->
<!-- START OF HEADING-->
<tr class="ds-remove" data-remove="ds-remove-2">
<td mc:edit="heading" colspan="3" align="center" valign="middle" style="margin: 0; padding-top: 60px; padding-bottom: 20px; text-transform: uppercase; font-size:28px ; font-weight: normal; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height: 140%; mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">The Insider</span>
</multiline>
</td>
</tr><!-- END OF HEADING-->
<!-- START OF DIVIDER IMAGE-->
<tr class="ds-remove" data-remove="ds-remove-3">
<td mc:edit="div_header" colspan="3" align="center" valign="middle" style="margin: 0; padding-bottom: 20px; font-size:14px ; font-weight: normal; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height:100%;">
<span class="tea14-content-editable"><img src="images/heading-divider-img.png" editable="true" alt="heading-divider-img" width="195" height="15" border="0" style="display: inline-block;"></span>
</td>
</tr><!-- END OF DIVIDER IMAGE-->
<!-- START OF HEADING-->
<tr class="ds-remove" data-remove="ds-remove-4">
<td mc:edit="heading1" colspan="3" align="center" valign="middle" style="margin: 0; padding-bottom: 0; font-size:18px ; font-weight: 300; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height: 140%; mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">Hi! I hope you've been well, I've put together some things I thought you might find interesting this month... enjoy!</span>
</multiline>
</td>
</tr><!-- END OF HEADING-->
<!-- START OF BUTTON-->
<!-- END OF BUTTON-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- END header -->
答案 0 :(得分：0)
使用背景图片可能会很棘手，但您购买的这个模板看起来不错。我做了一些编辑，我认为这将解决你的问题。在包含背景图像的嵌套表中，我给它了这种风格
<style="background-repeat:no-repeat; background-position:center;">
我也希望将相同的效果延续到outlook修复中，所以我将填充类型更改为框架而不是平铺：
<v:fill type="frame" src="https://cs.homecity.com/images/email_icons/r" color="#333333" ></v:fill>
在您体内试用此代码：
<body style="background-color:#ffffff; margin:0; padding:0;">
<!-- START header -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="100%" align="center">
<table ds-data-bg="1" bgcolor="#333333" class="ds-bg-module ele-active" width="100%" border="0" background="https://cs.homecity.com/images/email_icons/newsletterhouse2.jpg" align="center" style="background-repeat:no-repeat; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="frame" src="https://cs.homecity.com/images/email_icons/r" color="#333333" ></v:fill>
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<tbody>
<tr>
<td valign="top" align="center">
<table class="table-wrapper" width="660" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 60px 20px;">
<table class="table-inner" width="640" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">
<table class="full" width="640" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- START OF HEADER FOR LOGO & PREHEADER-->
<tbody>
<tr class="ds-remove" data-remove="ds-remove-1">
<td mc:edit="text_header" class="one_third" width="230" align="left" valign="middle" style=" margin: 0;font-weight: normal; font-size:14px ; color:#ffffff; font-family: 'Nunito', sans-serif; line-height: 18px;mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">Newsletter issue #1</span>
</multiline>
</td>
<td mc:edit="logo" class="one_third" width="180" align="center" valign="top" style="">
<span><a href="#" style="color: rgb(21, 177, 210); border-color: rgb(21, 177, 210);" class="tea14-content-editable"><img src="http://cdn3.homecity.com/inc/skins/pt-1r/schemes/homecity/img/homecity-new-white.png" editable="true" alt="logo" width="250" height="" border="0" style="display: inline-block; border-color: rgb(21, 177, 210); color: rgb(21, 177, 210);"></a></span>
</td>
<td mc:edit="forward" class="one_third_last" width="230" align="right" valign="middle" style=" margin: 0;font-weight: normal; font-size:14px ; color:#ffffff; font-family: 'Nunito', sans-serif; line-height: 18px;mso-line-height-rule: exactly;">
<multiline>
<span><a href="#" style="color:#ffffff; font-weight: normal; text-decoration: none;" class="tea14-content-editable">Web version</a> <a href="#" style="color:#ffffff; font-weight: normal; text-decoration: none;" class="tea14-content-editable">Forward</a></span>
</multiline>
</td>
</tr><!-- END OF HEADER FOR LOGO & PREHEADER-->
<!-- START OF HEADING-->
<tr class="ds-remove" data-remove="ds-remove-2">
<td mc:edit="heading" colspan="3" align="center" valign="middle" style="margin: 0; padding-top: 60px; padding-bottom: 20px; text-transform: uppercase; font-size:28px ; font-weight: normal; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height: 140%; mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">The Insider</span>
</multiline>
</td>
</tr><!-- END OF HEADING-->
<!-- START OF DIVIDER IMAGE-->
<tr class="ds-remove" data-remove="ds-remove-3">
<td mc:edit="div_header" colspan="3" align="center" valign="middle" style="margin: 0; padding-bottom: 20px; font-size:14px ; font-weight: normal; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height:100%;">
<span class="tea14-content-editable"><img src="images/heading-divider-img.png" editable="true" alt="heading-divider-img" width="195" height="15" border="0" style="display: inline-block;"></span>
</td>
</tr><!-- END OF DIVIDER IMAGE-->
<!-- START OF HEADING-->
<tr class="ds-remove" data-remove="ds-remove-4">
<td mc:edit="heading1" colspan="3" align="center" valign="middle" style="margin: 0; padding-bottom: 0; font-size:18px ; font-weight: 300; color:#ffffff; font-family: 'Nunito', Arial, sans-serif; line-height: 140%; mso-line-height-rule: exactly;">
<multiline>
<span class="tea14-content-editable">Hi! I hope you've been well, I've put together some things I thought you might find interesting this month... enjoy!</span>
</multiline>
</td>
</tr><!-- END OF HEADING-->
<!-- START OF BUTTON-->
<!-- END OF BUTTON-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr><!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- END header -->
</body>