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％。我正在使用表格和空表格单元来创建我的边距，并且只能使用内联样式。

我想知道是否有办法设置css属性，以便当屏幕宽度减小时，内容单元格的大小优先级最高，左右“边距”将是宽度减小的区域。

Answer 1

这听起来像是max-width的用例。您可以将元素的默认宽度设置为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]-->

Answer 2

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

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

<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>

注意：电子邮件移动应用程序仅支持摆动电子邮件中的内容。如果您在浏览器中打开电子邮件，则无法解决所有争议。

Html电子邮件 - 设置优先级

2 个答案: