responsive-design - 如何创建响应式电子邮件模板?

标签 responsive-design html-email mailer

如何创建响应式电子邮件模板?

我可以使用媒体查询构建响应式布局,但这些样式我们只能在外部/内部 CSS 中编写。我们不能使用 DIV 和外部/内部 CSS 的电子邮件模板。
我如何构建响应式电子邮件模板。

谢谢,
沙尼德

最佳答案

在 HTML 电子邮件中使用媒体查询并不是开发响应式 HTML 电子邮件的一个很好的解决方案,因为您的绝大多数受众不会以您想要的方式看到它。

Gmail 不会在 html 电子邮件的头部保留任何 CSS。这是媒体查询所在,所以.. 行不通。

Android 支持媒体查询,但充其量是有问题的。

开发伪响应式 HTML 电子邮件的最佳方法是构建流畅布局的 HTML 电子邮件。使用(为简单起见)单列布局设计您的电子邮件。您可以开发具有多列布局的流体布局,但它很快就会变得非常复杂。

像往常一样设计布局,内联所有样式并使用折旧的 HTML 属性而不是 css 样式.. 内联无关紧要,CSS 在 HTML 电子邮件中仍然不能很好地发挥作用。谨慎使用它,如果可以避免的话,根本不要使用它。

不要为元素分配高度,仅以百分比值分配宽度。因此,允许显示电子邮件的设备根据百分比值而不是特定像素大小来确定要显示的最佳宽度。

<table width="90%" cellpadding="0" cellspacing="0" border="0">...</table> 

这是一个很好的流体布局示例:http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6AE9D028347

关于responsive-design - 如何创建响应式电子邮件模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18504054/

相关文章:

HTML 电子邮件模板

html - Outlook(HTML 电子邮件)中最简单的垂直分隔符是什么?

php - 如何使用 Google Docs for Mailer 模板?

android - 使用嵌套 ScrollView 问题的响应式设计

css - 一个 div 的 2 个不同断点不起作用..?

html - Iphone响应式网站问题

php - 使用表单(ajax、jquery 和 PHP)发送电子邮件

javascript - 如何使硬币 slider 响应?

css - 如何为 Outlook 和 Gmail 电子邮件设置模板中的相同内边距?

ruby-on-rails - Rails,测试邮件地址