正常Web开发中的最佳实践要求在样式标记之间放置样式或加载样式表; 但是,我发现有几个电子邮件客户端会忽略任何样式标记,只执行内联样式(www.campaignmonitor.com).我可以解决这个问题,但我不确定CSS是否支持内联媒体查询.我希望我的电子邮件在桌面上显示一些不同.是否支持类似的东西?:
<div id="myDiv" style="@media screen and (max-width:480px;){ color:black; }"></div>
Run Code Online (Sandbox Code Playgroud)
HTML电子邮件是完全不同的野兽.你需要像1999年一样对它们进行编码.使用一组非常有限的标签并确保所有或你的样式都是内联的.使用表格进行布局.
要使用媒体查询,您需要同时执行这两项操作.
我建议您首先使用所有内联样式创建电子邮件.然后,当您对它感到满意时,您可以添加对移动设备的支持.
要添加对移动设备的支持,请将媒体查询添加到head标记,并用于!important覆盖任何内联样式.
以下是一个示例: 优化移动电子邮件
这是一个有用的图表,详细说明了哪些css支持电子邮件客户端. http://www.campaignmonitor.com/css/