Css 如何使电子邮件模板在手机上响应？
我有一个电子邮件模板，我需要更新。我必须使正确的图像显示在下面的维修id底部时，它是在手机上查看。到目前为止，我已经尝试了媒体查询，但我没有运气，但可能我没有正确使用。希望有一个解决方案，使其更具响应性Css 如何使电子邮件模板在手机上响应？,css,responsive,Css,Responsive,我有一个电子邮件模板，我需要更新。我必须使正确的图像显示在下面的维修id底部时，它是在手机上查看。到目前为止，我已经尝试了媒体查询，但我没有运气，但可能我没有正确使用。希望有一个解决方案，使其更具响应性 <style> @media (max-width: 480px){ #productimage { position: relative ; top: 200px; left: -100px;
<style>
@media (max-width: 480px){
#productimage {
position: relative ;
top: 200px;
left: -100px;
}
}
</style>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="570" style="background-image: url('https://www.marahlago.com/assets/images/ml-flower-watermark-.png'); background-repeat:no-repeat ;background-position:center;">
<tbody>
<tr>
<td height="15">
<div class="wrapper" style="width: 400px;margin-left: auto;margin-right: auto;">
<div class="top-mar-logo" style="text-align: center;padding: 40px 0px;">
<p>Dear [ADMIN NAME],</p>
<p>[FIRST NAME] has sent a repair piece. Please check the details below</p>
</div>
</div>
</td>
</tr>
<tr>
<td align="" style="border:0px solid #999999;">
<table border="0" width="100%">
<tbody>
<tr>
<td valign="top" width="60%">
<table border="0" cellpadding="4" cellspacing="" width="100%">
<tbody>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Customer Name</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[FIRST NAME] [LAST NAME]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Customer Email</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[EMAIL]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Product Name</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[PRODUCT NAME]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Purchased On</strong> </span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[DATE]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Return Reason</strong></span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[CUS NOTE]</span></td>
</tr>
<tr>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;"><strong>Repair ID</strong></span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">:</span></td>
<td><span class="text" style="color:#999999;font-family:Helvetica,Arial,sans-serif;font-size:14px;line-height:150%;">[REPAIR ID]</span></td>
</tr>
</tbody>
</table>
</td>
<td align="center" width="40%" id="productimage"><img src="[PRODUCTIMAGE]" alt="" width="100%" height="250px" class="fr-fic fr-dii"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
@介质（最大宽度：480px）{
#产品图像{
位置：相对位置；
顶部：200px；
左：-100px；
}
}
尊敬的[管理员姓名]
[名字]送了一件修理品。请查看下面的详细信息
客户名称
:
[名][姓]
客户电子邮件
:
[电邮]
产品名称
:
[产品名称]
于购买
:
[日期]
退货原因
:
[注]
修复ID
:
[维修ID]
不知道该用什么。希望这对您有所帮助 请不要忘记在头标签中添加
@介质（最大宽度：480px）{
.表格行{
显示：块；
}
#产品图像{
位置：相对位置；
显示：块；
宽度：100%；
}
}
尊敬的[管理员姓名]
[名字]送了一件修理品。请查看下面的详细信息
客户名称
:
[名][姓]
客户电子邮件
:
[电邮]
产品名称
:
[产品名称]
于购买
:
[日期]
退货原因
:
[注]
修复ID
:
[维修ID]