Welcome, Old Sport!

如何制作响应式邮件

by ilikecss ON 2013/10/29 7735

如何制作响应式邮件在来新公司之前我是不接触邮件类HTML的,只了解邮件的HTML格式和制作方法,table布局,CSS全部写在HTML里面的,不使用link调用。由于公司业务需要,领导要求制作邮件响应式的布局,也能否符合日益增进的移动用户需求。网上参考了一些资料,在这里跟大家总结一下心得。

首先,比较硬性的规定是你发布邮件的系统,必须可以打包上传的邮件系统,一些普通邮箱发送会导致你的文件丢失或解析错误。国外有几个比较有名的邮件系统,都是收费的,公司需求的话因该不是问题,下面一起来看具体代码:

meta标签不用说了,响应式对应必须插入的

<meta name="viewport" content="width=device-width, initial-scale=1" />

CSS样式

<style type="text/css">
/* simple reset */
body {
	font-family: Arial, Helvetica, sans-serif;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	margin:0;
	padding:0;
}
p, tr, td, h1,h2,h3,h4,h5,h6{
	margin:0;
	padding:0;
	list-style: none;
}
img {border: 0;}
/* Mobile stylesheet for iPhone and Android */
@media only screen and (max-width: 600px) {
table[class="full_width"] {
      width: 100%!important;
    }
td[class="full_width"] {
      width: 100%!important;
    }
}
</style>

响应式CSS使用@media去定义,注意到最后那个定义样式了吗?在table里的样式需要这样去写,普通写法邮件里是不认的。

我上面这段table定义是针对在mobile里table会自动伸展到100%的宽度去自适应。具体用法可以参照下面的HTML结构:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><table width="600" cellpadding="0" cellspacing="0" border="0" class="full_width" align="center"></table></td>
</tr>
</table>

最外层大家使用一个100%宽度的table,里面一层才是内容部分,具体尺寸自定义,普通邮件设置600px,然后给这个600px的table定义一个类”full_width”(名称自定),就是上面的写的样式,这样在600px以下就会自动跳到百分比的宽度了。用这种定义方式以此类推来制作响应式设计。

PS:

1. 在某些邮件系统里,HTML规范相当苛刻,比如outlook,hotmail,在普通标签里写margin&padding浏览器是不认的,td标签里可以设置边距。遇到此类情况就测试你table功底了,一些边距可以通过设置空的tr、td给它们宽度、高度来实现具体效果。
2. 手机测试请使用自带的邮件APP程序,不要用手机的浏览器打开邮件那是不支持的。

16条评论
  1. #1

    yxiao说道:

    不明觉厉。

  2. #2

    Yusky说道:

    不明觉厉。 :arrow:

  3. #3

    CatFrom说道:

    虽然没有亲自测试过这个方面,
    不过我也有一阵子被各种终端验证弄的焦头烂额,
    我倒是不求在上海买个厕所,我就求能找到一个让我偶尔能学习新东西的职场就好。
    可是就这一点有时就很难。同事并不在乎前端的兴趣或者技术的提高,他们只是让我不停的学习服务器和终端开发的东西。。。

    • ilikecss说道:

      岗位不同吧,你要想做前端就只能去应聘前段或网页相关的职位了

  4. 现在居然连邮件都是响应式的了,好吧,响应式太流行了。

  5. #5

    说道:

    留个联系qq吧,有些不明白的东西还想请教您呢

  6. #6

    大发说道:

    邮件的格式还是比较特殊的

  7. #7

    Kayo说道:

    之前也是工作需要而做了邮件内的HTML,比起网页HTML,这个实在复杂很多,而且不同的邮箱系统对于邮件内嵌样式的处理也会不一样,像margin&padding这两个属性,有些邮箱系统会单独过滤margin,有些则单独过滤padding,有些两个都不认,实际制作起来相当费时!

  8. #8

    JENNY说道:

    你真的太強拉




TOP