Question

我有一个内容表（我的用户的得分表），每个预定的时间段内都会通过电子邮件自动发送。

html曾经有静态表格大小和其他测量定义（以像素为单位），而不是百分比。

我的iPhone以及Chrome网络浏览器上的一切似乎都很好，但在Android设备上完全不成比例。

我决定转换为响应式布局，用百分比代替。这似乎已经解决了我的问题，但现在，由于PC和移动设备宽度\高度比之间的宽度差异，我需要确定分数表到PC屏幕和移动\平板电脑屏幕的不同宽度。 / p>

我知道这可以通过使用@media规则来完成，但问题是CSS的这个功能只能在样式表中使用，而不能在内联格式的CSS（在HTML中）中使用。您可能知道，大多数电子邮件客户端都不允许在HTML电子邮件中使用CSS样式表（类，CSS选择器）。

在这种情况下，您有什么建议？

非常感谢任何帮助。

Answer 1

大多数电子邮件客户端不允许在HTML电子邮件中使用CSS样式表（类，CSS选择器）

未链接样式表，但它们允许您将样式放在style的{{1}}标记内。是的，一些电子邮件客户端剥离了这些样式，但没有理由不使用它们。如今，大量电子邮件客户端也支持head规则。关于各种电子邮件客户端here支持和不支持的内容，有很多好的建议。（该网站还有大量经过良好测试和美观的电子邮件模板。）

由于某些电子邮件客户端不支持文档头部的样式，因此最安全的方法是添加内联样式。但是，这不应该阻止您在头部区域中放置样式 - 例如@media规则 - 用于那些可以处理它们的客户端。

Answer 2

只是加上ralph所说的......

截至去年，Gmail成为最受欢迎的电子邮件客户端，他们从电子邮件中删除了整个部分。所以使用内联非常重要。

当您定位不同的电子邮件客户端时，这是一个非常好的资源 http://www.campaignmonitor.com/css/

这些是我在每个头型部分中包含的一些有用的黑客

<style>
/* Force Outlook to provide a "view in browser" button. */
body{ width:100% !important; height:100% !important; margin:0; padding:0; background-color: #f8f3eb;}
.ReadMsgBody{width:100%;} 
.ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
/* Reset Styles */
body{-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} /* Prevent Webkit and Windows Mobile platforms from changing default font sizes. */
</style>

HTML电子邮件中的CSS类和@media规则

2 个答案: