EDM - 新作
2016-08-26 18:23
183 查看
上一次做EDM至少要追溯到两年之前了。用table搭建,要用HTML4,定宽,测试Web邮箱,outlook,foxmail基本就OK。
新公司,新项目,开始的需求是全响应式的。做了预研,发现Windows上outlook图片没有办法自适应。提出将需求改成desktop上768定宽,mobile上自适应。当然,能显示mobile模式的需支持media query。Mac的outlook在视窗缩小的时候也能显示mobile模式。
要实现desktop和mobile两套不同的布局,无奈要写两套DOM。对table设置display: none常不起效,特别是后代元素里还有table标签。所以,mobile中的DOM虽然还是采用了DOM搭建,但是尽量结构简单。另外需要注意的是,在media query中显示mobile内容时,不能写display: block, inline-block等,要视元素而定。这里面有很多坑,需不断探索。
最坑的莫过于Gmail,始终无法隐藏掉mobile的内容。对display: none直接忽略,对table设置width: 0等统统不起效。再百般测试后,终极解决方案如下。给mobile的table加一个父元素。
为什么加了这么一堆?不仅仅Gmail会忽略display,还会将height: 0过滤成min-height: 0。
另外还需注意的事,慎用p标签,因为Gmail会自动给p添加上下margin
新公司,新项目,开始的需求是全响应式的。做了预研,发现Windows上outlook图片没有办法自适应。提出将需求改成desktop上768定宽,mobile上自适应。当然,能显示mobile模式的需支持media query。Mac的outlook在视窗缩小的时候也能显示mobile模式。
要实现desktop和mobile两套不同的布局,无奈要写两套DOM。对table设置display: none常不起效,特别是后代元素里还有table标签。所以,mobile中的DOM虽然还是采用了DOM搭建,但是尽量结构简单。另外需要注意的是,在media query中显示mobile内容时,不能写display: block, inline-block等,要视元素而定。这里面有很多坑,需不断探索。
.desktop{ display: none !important; } .mobile-cell{ display: table-cell !important;} .mobile-table{ display: table !important;}
最坑的莫过于Gmail,始终无法隐藏掉mobile的内容。对display: none直接忽略,对table设置width: 0等统统不起效。再百般测试后,终极解决方案如下。给mobile的table加一个父元素。
<div class="mobile-gmail" style="overflow:hidden; display:none; height:0; width: 0;max-height: 0;"> <table class="mobile-table" border="0" cellpadding="0" cellspacing="0" align="center">内容省略</table> </div>
为什么加了这么一堆?不仅仅Gmail会忽略display,还会将height: 0过滤成min-height: 0。
overflow: hidden; display: none; width: 0; height: 0; max-height: 0;
在控制显示时,再对应修改这些属性。
@media screen and (max-width: 768px){ .mobile-gmail{ overflow: auto !important; width: 100% !important; height: auto !important; max-height: 100% !important;} }
另外还需注意的事,慎用p标签,因为Gmail会自动给p添加上下margin
-webkit-margin-before: 1em; -webkit-margin-after: 1em;
相关文章推荐
- Entity Data Model (EDM) 深入分析, Part 2
- 《Adobe AIR权威指南》——《Flex 3权威指南》作者新作
- edmgen.exe的基本功能
- 【新作】JQuery 无限级超简单之下拉菜单插件iMenu
- 2011年给力新作——《数据库系统工程师考试案例梳理、真题透解与强化训练》
- 龙年新作:水印文字添加工具源码摘要
- [转]Model First+DbContext Generator生成基于Code First方式代码的EDM文件
- EDM数据营销概念简要介绍
- EDM邮件营销的劣势讲解
- 外贸eDM营销的步骤和效果评估
- EDM邮件营销如何防止邮件被拒收和进垃圾箱
- 如何提高EDM邮件的打开率
- 如何制作EDM邮件的内容
- 博主个人EDM营销的经验杂谈
- 让EDM邮件内容吸引眼球的三个绝招
- 新作《ASP.NET MVC 4框架揭秘》正式出版
- EDM营销中如何应对用户退订
- 创建EDM
- EDM电子邮件营销实施条件和邮件列表分析
- 12月新作