EDM - 新作

上一次做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等，要视元素而定。这里面有很多坑，需不断探索。

.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;