Html 电子邮件 - 设置优先级

Question

   <table width="100%;">
      <tr>
         <td>  <!--Right Space (Variable Width)-->  </td>
         <td>  <!--content (Width Set - High Priority)-->  </td>
         <td>  <!--Left Space (Variable Width -->  </td>
      </tr>
   </table>

我在编写电子邮件时遇到问题，我希望根据屏幕尺寸设置不同的边距。它适用于媒体查询，但我意识到有些电子邮件客户端不支持它们。我也尝试过使用宽度百分比，但我希望内容在移动尺寸的屏幕上约为 90%，在更大的屏幕上约为 50%。我正在使用 tables 和空 table 单元格来创建我的边距并且只能使用内联样式。

我想知道是否有办法设置 css 属性，以便当屏幕宽度减小时，内容单元格的大小具有最高优先级，左右 'margins' 将是宽度减小的那些。

Answer 1

根据我的经验，电子邮件客户端只允许内联样式。

根据您的要求，您需要在代码下方进行设置，

<div><!--email client body-->

   <table width="650px;padding:50px;"><!--you can give padding not only margin properties of CSS-->
      <table style="width:100%">
            <!--content-->
              <table style="padding:20px"></table><!--Again added to padding instead of margin--->
      </table>

   </table>

</div>

注意：电子邮件移动应用程序仅支持摆动email.If中的内容您在浏览器中打开电子邮件而不摆动所有内容。

Answer 2

这听起来像是最大宽度的用例。您可以将元素的默认宽度设置为 90%，但定义的最大宽度是桌面显示总宽度的一半。由于 Outlook 不支持此属性，您还需要包括 MSO 条件。 CSS (for HTML email) reference guide

见下文：

<!--[if (gte mso 9) | (IE)]><table align="center" width="640"><tr><td align="center"><![endif]-->
<table align="center" width="100%" style="max-width:640px;">
<tr>
<td align="center">
   <!--[if (gte mso 9) | (IE)]><table width="320" align="center"><tr><td align="center"><![endif]-->
   <table width="90%" align="center" style="max-width:320px;">
   <tr>
   <td align="center">This content will be at 90% width of the container up to 320px wide, where it will stop</td>
   </tr>
   </table>
   <!--[if (gte mso 9) | (IE)]></td></tr></table><![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9) | (IE)]></td></tr></table><![endif]-->

Html 电子邮件 - 设置优先级

Html Email - Set priority on

html

css

html-email