Question

我有一个需要更新的电子邮件模板。当仅在移动设备中查看时，我必须在维修ID下方的底部显示正确的图像。截至目前，我已经尝试过媒体查询，但是我没有运气，但是可能我没有正确使用。希望有一个可以使它响应更快的解决方案。

bind it to the res object

不确定使用什么。

Answer 1

希望这对您有所帮助。

请不要忘记在您的head标签中添加<meta name="viewport" content="width=device-width, initial-scale=1">。

@media (max-width: 480px){
  .table-row{
    display: block;
  }
  #productimage { 
    position: relative ;
    display: block;
    width:100%;
      }
    }

<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 class="table-row">
                            <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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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="img here" width="100%" height="250px" class="fr-fic fr-dii"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

如何使电子邮件模板在移动设备上响应？

1 个答案: