由于屏幕尺寸较小，我希望重新调整标题图片的大小以适应容器（按比例），因为屏幕尺寸较小，它会重新调整大小。
当前的CSS代码：
@media only screen and (max-width: 660px) {
table.container { width: 480px !important; }
td.headline { padding: 5px 0px 0px 30px !important}
td.headline h1 { font-size: 28px !important}
}
@media only screen and (max-width: 510px) {
table.container { width: 320px !important; }
td.headline { padding: 5px 0px 0px 30px !important; }
td.headline h1 { font-size: 22px !important; text-align: center; }
}
我试过了：
使用内联样式调整大小;在css查询中陈述第二个阈值时，不会重新调整大小：
<table class="container" width="1000" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="header" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px"; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; border-top: 1px solid #dbc064;>
<a href="http://www.reha-com-tech.de/">
<img id="banner" src="images/header_large.jpg" alt="Reha-Com-Tech" style="max-width:100%; height: auto;" width="100%" height="auto"></a>
</td>
</tr>
<tr>
<td valign="top" class="headline" bgcolor="#ffffff" style="padding: 15px 20px 5px 30px; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; border-bottom: 1px solid #000000; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;">
<h1 style="margin:0px 0px 15px 0px; font-weight:normal; font-size:32px; color:#000000;">Newsletter zur Frühlings-Aktion 2016</h>
</td>
</tr>
在较小的屏幕尺寸上渲染时使用较小的图像替换图像，确实不起作用，它只是禁用图像而不是替换它：
@media only screen and (max-width: 660px) {
table.container { width: 480px !important; }
td.header img {display: none;}
td. header { width: 480px; height: 108px; url(images/header_medium.jpg) no-repeat 0px 0px}
td.headline { padding: 5px 0px 0px 30px !important}
td.headline h1 { font-size: 28px !important}
还尝试使用CSS自动调整大小（下面的例子），标题和右边的表格结尾之间总是有差距：
@media only screen and (max-width: 480px){
.banner{
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
为了获得更好的图片，这里有两个时事通讯截图：
PIC1 Normal Full-size render PIC2 480px render
现在，对于所有愿意浏览新代码的勇敢者，整个HTML;）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Reha-Com-Tech Newsletter</title>
<style type="text/css">
@media only screen and (max-width: 660px) {
table.container { width: 480px !important; }
td.headline { padding: 5px 0px 0px 30px !important}
td.headline h1 { font-size: 28px !important}
}
@media only screen and (max-width: 510px) {
table.container { width: 320px !important; }
td.headline { padding: 5px 0px 0px 30px !important; }
td.headline h1 { font-size: 22px !important; text-align: center; }
}
</style>
</head>
<body bgcolor="#f5be3d">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f5be3d">
<tr>
<td>
<table class="container" width="1000" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" class="header" bgcolor="#ffffff" style="padding: 0px 0px 0px 0px"; border-left: 1px solid #dbc064; border-right: 1px solid #dbc064; border-top: 1px solid #dbc064;>
<a href="http://www.reha-com-tech.de/">
<img id="banner" src="images/header_large.jpg" alt="Reha-Com-Tech" style="max-width:100%; height: auto;" width="100%" height="auto"></a>
</td>
</tr>
<tr>
<td valign="top" class="headline" bgcolor="#ffffff" style="padding: 15px 20px 5px 30px; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; border-bottom: 1px solid #000000; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px;">
<h1 style="margin:0px 0px 15px 0px; font-weight:normal; font-size:32px; color:#000000;">Newsletter zur Frühlings-Aktion 2016</h>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f5f2e5" class="content" style="padding: 30px 30px 10px 30px; border-right: 1px solid #ffffff; border-left: 1px solid #ffffff; border-bottom: 1px solid #000000; font-family:Arial, Helvetica, sans-serif; font-size: 20px; line-height:22px; color: #654308;">
Sehr geehrte Damen und Herren, sehr geehrte Geschäftspartner,<br>
<br>
Dies ist ein Test-Newsletter! Sehen Sie sich um! Angebote nur befristet gültig!<br>
<br>
Mit freundlichen Grüßen <br>
<br>
i.A. Marcel Wambsganss <br> <br>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#f5f2e5" class="promos" style="padding: 10px 30px 25px 30px; border-right:1px solid #dbc064; border-left:1px solid #dbc064; background-color: #ffffff; font-family: Arial, Helvetica, sans-serif;">
<table class="promo_1" width="270" align="left">
<tr>
<td>
<img class="promo" alt="Promo image 1" src="images/promo_1_large.jpg">
<h3 style="font-size:16px;">Bellman Visit Telefonsender BE1430</h3>
Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
<br><br>
<a href="http://p269195.webspaceconfig.de/shop/product_info.php?info=p60_bellman-visit-telefonsender-be1430.html&XTCsid=dfske903dfgt23nqnal2dpulg4" style="background-color: #71a412; border-radius: 5px; color: #fff; padding: 5px 10px 5px 10px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606;">Mehr</a>
</td>
</tr>
</table>
<table class="promo_2" width="270" align="right">
<tr>
<td>
<img class="promo" alt="Promo image 1" src="images/promo_2_large.jpg">
<h3 style="font-size:16px;">Relation 2 (Phonic Ear)</h3>
Lorem ipsum dolor sit amet consectetur incididunt ut labore et dolore magna aliqua elit sed do eiusmod.
<br><br>
<a href="http://p269195.webspaceconfig.de/shop/product_info.php?info=p233_relation-2--phonic-ear-.html" style="background-color: #71a412; border-radius: 5px; color: #fff; padding: 5px 10px 5px 10px; text-decoration: none; text-shadow: 0px 2px 2px #3a5606;">Mehr</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#b7b7b7" class="callout" style="background-color: #b7b7b7; padding: 30px; border-right: 1px solid #b7b7b7; border-bottom: 1px solid #b7b7b7; border-left: 1px solid #b7b7b7;">
<table class="callout_1" width="140" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
<a href="http://www.facebook.com/reha.com.tech/"><img src="images/facebook.png" width="75" height="75"></a><br><br>
Besuchen sie uns auch in den sozialen Netzwerken:
<br><br><br><br>
<a href="https://www.facebook.com/reha.com.tech/" style="color:#ffffff">Facebook</a>
</td>
</tr>
</table>
<table class="callout_2" width="140" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
<a href="mailto:service@reha-com-tech.de"><img src="images/email.png" width="75" height="75"></a><br><br>
Haben sie Fragen oder ein sonstiges Anliegen? Schreiben Sie uns!
<br><br><br>
<a href="mailto:service@reha-com-tech.de" style="color:#ffffff">Email</a>
</td>
</tr>
</table>
<table class="callout_3" width="140" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="140" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
<img src="images/telefon.png" width="75" height="75"><br><br>
Fon: 06519945680<br>
Fax: 06519945681<br>
Skype:<br>reha-com-tech
<br><br><br>
<a href="#" style="color:#ffffff">Telefon</a>
</td>
</tr>
</table>
<table class="callout_4" width="140" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
<a href="http://reha-com-tech.de"><img src="images/web.png" width="75" height="75"></a><br><br>
Besuchen sie uns im Web!
<br><br><br><br><br>
<a href="http://www.reha-com-tech.de/" style="color:#ffffff">Website</a>
</td>
</tr>
</table>
<table class="callout_5" width="140" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
<a href="http://p269195.webspaceconfig.de/shop/shop_content.php?coID=1201"><img src="images/shopping.png" width="75" height="75"></a><br><br>
Informationen rund um den Bestellvorgang.
<br><br><br><br>
<a href="http://p269195.webspaceconfig.de/shop/shop_content.php?coID=1201" style="color:#ffffff">Shopinformationen</a>
</td>
</tr>
</table>
<table class="callout_6" width="140" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #ffffff;">
<a href="http://p269195.webspaceconfig.de/shop/shop_content.php?coID=200"><img src="images/logo_bw.jpg" width="75" height="75"></a><br><br>
Erfahren sie mehr über uns.
<br><br><br><br><br>
<a href="http://p269195.webspaceconfig.de/shop/shop_content.php?coID=200" style="color:#ffffff">Reha-Com-Tech</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#b7b7b7" class="impressum" style="background-color: #b7b7b7; padding: 30px; border-right: 1px solid #b7b7b7; border-top: 2px solid #ffffff;border-bottom: 1px solid #b7b7b7; border-left: 1px solid #b7b7b7;">
<table class="callout_1" width="500" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="135" style="padding-left: 10px; padding-right: 10px; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height: 16px; color: #ffffff;">
Impressum:<br><br>
Reha-Technik &
Kommunikationstechnik
für Hörgeschädigte<br><br>
Schönbornstr. 1
D-54295 Trier<br><br>
Fon: + 49 (0) 651-99 45 680<br>
Fax: + 49 (0) 651-99 45 681<br><br>
E-mail: info@reha-com-tech.de <br><br>
Alleinvertretungsberechtigt:
Ralf Oedekoven e.K.<br><br>
Handelsregister:<br>
HRA 4748 Registergericht Wittlich
USt.-IDNr.: DE 157 829 984<br><br>
WEEE-Reg.-Nr.: DE14064765<br><br>
<a href="http://p269195.webspaceconfig.de/shop/shop_content.php?coID=4&XTCsid=nstnqgv7uu9qug727dqgln3ia0">Impressum</a>
</td>
</tr>
</table><td>
</td>
</tr>
<tr>
<td valign="top" class="footer" style="padding: 10px 0px 30px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #b2a16e;">
© Reha-Com-Tech. Bitte antorten sie nicht auf diese Mail.
<br><br>
Möchten sie den Newsletter nicht mehr erhalten, genügt eine kurze Nachricht an:<a href="mailto:info@reha-com-tech" style="color:#000000;">info@reha-com-tech</a>.
<br><br>
Diese E-Mail enthält vertrauliche und/oder rechtlich geschützte Informationen. Sollten Sie nicht der Empfänger sein, für den diese Mail bestimmt ist, so informieren Sie bitte sofort den Absender und löschen Sie diese E-Mail. Das unerlaubte Weiterleiten und das unbefugte Kopieren dieser E-Mail sowie der Anhänge sind nicht gestattet.
</td>
</tr>
</td>
</tr>
</table>
</body>
答案 0 :(得分：0)
您可以尝试调整代码，以便在需要可调整大小或响应式阻止时提供@media，而不是使用width: 100%规则。
这对我有用：
首先：HTML标记
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
</head>
<body style="
max-width: 100%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
text-rendering: optimizeLegibility;
/* add as many styles as you need here to the email body */
">
尝试对每个部分使用内联样式。它帮助了我，可能也适合你。例如：
<h1 align="justify" style="font-size:18px; color: rgb(0,0,0); text-shadow: 2px 2px 4px rgb(108,108,108);">
....
<table rules="all" style="border-color: #999; width:95%; margin-right: 5px" cellpadding="5">
第二：PHP表单处理程序
假设您要通过php发送电子邮件，您需要在php headers上指定：
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$headers .= "From: $your_name <$your_email>\r\n";
$headers .= "Reply-To: $your_name <$your_email>\r\n";
...
适用于此邮件功能：
mail ($to, $subject, $message, $headers, -fyouremail@yourdomain.com');
现在....如果您在设置这些内容方面遇到太多麻烦，可以尝试MailChimp，这是第三部分的新闻通讯/电子邮件服务。
希望有所帮助！如果我这样做，请考虑将此答案标记为有用和/或正确。谢谢！