我要创建非常简单的内容。请参阅图像链接。我有电子邮件模板screenshot
现在需要做出回应。如果我在更大的屏幕上看到，我应该看到2张图片。如果我在手机中看到我应该看到下面带有文字和按钮的1张图片。
<table align="center" border="0" cellpadding="10" cellspacing="0" style="height:100%;width:100%;">
<tr>
<td style="text-align: center;height:5%;">
<hr style="width: 90%;height: 1px;background-color: #dddddd;">
</td>
</tr>
<tr style="text-align: center;height:1%;">
<td style="width: 360px; height: 0.5%; font-family: Arial; font-size: 7px; font-weight: bold; line-height: 0.5%; color: rgb(0, 0, 0); text-align: center;">
</td>
</tr>
<tr>
<td style="text-align: center;">
<span style="font-size:32px;"><span style="font-family:arial,helvetica,sans-serif;"><b>
<span style="text-align: center;">Popular destinations </span>
</b></span></span>
</td>
</tr>
<tr>
<td style="text-align: center;">
</td>
</tr>
<tr style="width: 571px;height: 40px;font-family: Arial;font-size: 15px;line-height: 1.33;text-align: center;color: #222222;">
<td style="text-align: center;margin-left:10%;margin-right:10%;">
<div style="margin-left: 40px;">
<font color="#000000" face="Times New Roman">
<span style="font-size: 16px;">Praesent pretium, eros eget porttitor tempor, turpis nisi dignissim est, vitae vehicula massa est a nulla isus nibh, egestas sit amet feugiat eget, semper sit amet nunc.</span>
</font>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
<img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
</td>
<td>
<img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
<div style="margin-left: 40px; line-height: 1.5;">
<span style="font-family:times new roman,times,serif;"><span style="font-size:26px;">Brigton</span></span>
<br>
Starting from $400/week
</div>
</td>
<td>
<div style="margin-left: 40px; line-height: 1.5;">
<span style="font-size:26px;"><span style="font-family:times new roman,times,serif;">Brigton</span></span>
<br>
Starting from $400/week
</div>
</td>
</tr>
</table>
<div style="margin-left: 40px;">
</div>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
</td>
<td>
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
<a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
</div>
</td>
<td>
<div>
</div>
</td>
<td>
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
<a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
</div>
</td>
</tr>
</table>
<div style="margin-left: 40px;">
</div>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
<img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
</td>
<td>
<img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
<div style="margin-left: 40px; line-height: 1.5;">
<span style="font-family: "times new roman", times, serif;"><span style="font-size: 26px;">Brigton</span></span>
<br>
Starting from $400/week
</div>
</td>
<td>
<div style="margin-left: 40px; line-height: 1.5;">
<span style="font-family: "times new roman", times, serif;"><span style="font-size: 26px;">Brigton</span></span>
<br>
Starting from $400/week
</div>
</td>
</tr>
</table>
<div style="margin-left: 40px;">
</div>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td>
<div style="margin-left: 40px;">
</div>
</td>
<td>
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
<a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
</div>
</td>
<td>
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
<a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
我遇到的问题是
在这上面度过一个晚上，请你帮忙
我无法使用媒体查询，电子邮件需要在Outlook或yahoo或Gmail等常见电子邮件客户端中打开
答案 0 :(得分：2)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
</head>
<body>
<style type="text/css">
@media only screen and (max-width: 479px) {
.col{ width:100% !important; float:left !important; margin-bottom:15px !important; }
}
</style>
<table align="center" border="0" cellpadding="10" cellspacing="0" style="height:100%;width:100%;">
<tr>
<td style="text-align: center;height:5%;"><hr style="width: 90%;height: 1px;background-color: #dddddd;"></td>
</tr>
<tr style="text-align: center;height:1%;">
<td style="width: 360px; height: 0.5%; font-family: Arial; font-size: 7px; font-weight: bold; line-height: 0.5%; color: rgb(0, 0, 0); text-align: center;"></td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size:32px;"><span style="font-family:arial,helvetica,sans-serif;"><b> <span style="text-align: center;">Popular destinations </span> </b></span></span></td>
</tr>
<tr style="width: 571px;height: 40px;font-family: Arial;font-size: 15px;line-height: 1.33;text-align: center;color: #222222;">
<td style="text-align: center;margin-left:10%;margin-right:10%;"><div style="margin-left: 40px;"> <font color="#000000" face="Times New Roman"> <span style="font-size: 16px;">Praesent pretium, eros eget porttitor tempor, turpis nisi dignissim est, vitae vehicula massa est a nulla isus nibh, egestas sit amet feugiat eget, semper sit amet nunc.</span> </font> </div></td>
</tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
<div style="margin-left: 40px; line-height: 1.5;"> <span style="font-family:times new roman,times,serif;"><span style="font-size:26px;">Brigton</span></span> <br>
Starting from $400/week </div>
<div style="margin:15px 0 0 40px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
<a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
<td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
<div style="margin-left: 40px; line-height: 1.5;"> <span style="font-size:26px;"><span style="font-family:times new roman,times,serif;">Brigton</span></span> <br>
Starting from $400/week </div>
<div style="margin:15px 0 0 40px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
<a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
</tr>
</table></td>
</tr>
<tr>
<td><table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
<tr>
<td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
<div style="margin-left: 40px; line-height: 1.5;"> <span style="font-family: "times new roman", times, serif;"><span style="font-size: 26px;">Brigton</span></span> <br>
Starting from $400/week </div>
<div style="margin:15px 0 0 40px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
<a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
<td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
<div style="margin-left: 40px; line-height: 1.5;"> <span style="font-family: "times new roman", times, serif;"><span style="font-size: 26px;">Brigton</span></span> <br>
Starting from $400/week </div>
<div style="margin:15px 0 0 40px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
<a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>