responsive EDM HTML的编写注意事项

最新推荐文章于 2021-06-28 11:56:53 发布

抹茶米苏

最新推荐文章于 2021-06-28 11:56:53 发布

阅读量1.7k

点赞数

分类专栏： CSS 文章标签： HTML css 电子邮件响应式布局

本文链接：https://blog.csdn.net/u013770247/article/details/19903007

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

邮件EDM趋向于历史HTML的写法，越简单越明了，采用table布局，采用style属性编写样式。

大部分童鞋大概已经忘了table的写法了，因此笔者加入部分我认为比较重要的responsive EDM与table相关的笔记。

具体的注意事项：

1.无DOCTYPE,电子邮件会自动删除代码中的doctype声明；

2.bgcolor可以不需要"#",不能写#06c,要写成6位#0066cc;

3.table的cellpadding,cellspacing指的是单元格的padding and margin;

4.做responsive的时候，两列布局考虑用两个table，间距用table定义，记得给间距table同时定义width和height才可显示;或者用td，加上class="float",responsive样式写为

@media only screen and (max-width:480px) {
		  .float{
		     display:block;
		     float:left;
		     width:100%;
		  }
		}

另外，IE8不支持media query;如果想要用media query的话，要用相关的media query的js，当然，EDM支持js的话，不知道猴年马月了。

5.我们内容有15px的间距，我们使用一个空的单元格来制作这个间距。这个空格没有问题，但最好在单元格中添加一个空白的符号 

6.对于table的align="left",align="right",表示给tabe加上float属性;在EDM邮件客户端中，会默认删除邮件HTML中的posiiton,float属性，所以对于响应式邮件的设计，两列布局用table时，可使用此方法间接使用float,定位两列在一行上;

7.图片请使用绝对路径，因为页面和图片文件肯定不是在一起的，发送邮件的时候，以HTML代码形式发送，无法调用相对路径的图片；

8.有些邮件客户端不支持背景图片，非要使用背景图片的，请添加bgcolor，保证无法显示图片的情况仍有背景；

9.<head>中的内容几乎会被客户端删除，所以在head中的对于一些客户端是没有用的；

10.不建议使用colspan,rowspan合并单元格的属性，很容易天下大乱的；要不就直接内部添加一个新的table表格；

11.很多标签请慎用，在outlook上邮件的兼容甚至于比IE4,5还差，忘了标签语义化吧，用样式代替；

响应式responsive:

要做响应式的EDM，记得给head标签加上如下meta：

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

为了兼容IOS，记得要重置body标签，

<body bgcolor="#EAE8E4" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" style="height: auto; padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust: 100%;">

重置table标签，不同的项目不同处理，但border,cellpadding,cellspacing一定要重置

<table width="600" border="0" cellspacing="0" cellpadding="0" style="font-size:12px;font-family:Arial,Verdana,Helvetica;color:#525252;" class="full">

其中的class="full"是我设置的一个width:100%!important;属性

<style type="text/css" media="all">
		@media only screen and (max-width:600px) {
			table[class="full"] {width: 100%!important;}
			td[class="full"] {width: 100%!important;}
		}
		@media only screen and (max-width:435px) {
			img[class="full"] {width: 100%!important;}
		}
	</style>

在宽度小于600px的时候让其宽度100%自适应；

记得给<style>标签里的样式加上!important，以完全覆盖行内样式；