美文网首页
前端EDM,整理

前端EDM,整理

作者: 不是伯格是波哥 | 来源:发表于2017-03-09 11:09 被阅读0次

    基本要求

    1. 不要div,只用table布局,div会被当做垃圾邮件
    2. 不要用背景图,用img,某些邮箱不支持背景图
    3. 不要用margin调节左右边距,用padding,某些邮箱不支持左右margin
    4. 标签之间不要留空隙,直接压缩html,否则某些有些会解析空隙
    5. 不要用link,所有样式都要行内,所以也就没有@media等等等
    6. 不能用脚本
    7. 不要用margin: 0 auto居中,对齐方式靠td的align和valign属性
    8. 子级不要用百分比宽度,宽度写死
    9. 不要用line-height撑高度,比如有一行文字,通常直接一个line-height就达到撑高度和居中的效果了,但是在邮箱里必须设置height,最好加上max-height,某些邮箱会把height解析成min-height
    10. 不要用任何CSS3属性,所有属性都用你能想到的兼容性最好的属性
    11. 不要用float、position之类的布局,都用table布局,可以用table或td的align、valign

    响应式EDM

    可以利用浮动元素宽度不够会掉下去的思路做响应式。无非就是需求里有一条类似,宽度足够时4列布局,不够时两列布局这种。再复杂的响应式做不到,毕竟不支持CSS3

    但是EDM最好不要用浮动,所以利用table标签的align属性,align属性的行为和浮动一样。

    方法:

    在百分比宽度的盒子里放两个align="left"的table元素,宽度不够时会像浮动元素一样掉下去。但是建议不要用百分比宽度,所以直接写两个table元素,不用任何元素包裹,浏览器窗口就是所谓的百分比宽度的盒子。
    比如上面的例子,分4列和2列布局,那么就写两个table一个table里写两个列,当浏览器窗口宽度不够时,装着两列的table会掉下去,并向左对齐,形成两列布局。

    相关文章

      网友评论

          本文标题:前端EDM,整理

          本文链接:https://www.haomeiwen.com/subject/qndwgttx.html