自适应模板制作指南

  • Comments Off on 自适应模板制作指南
  • 313
  • A+
所属分类:前端 线上推广

许多邮件客户端还是沿用的旧协议,解析HTML代码经常会出现错误。因此少用div和复杂样式。

网页手机页面的 head 里加入下面这条元标签

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

添加控制手机端显示样式

@media only screen and (max-width:480px){ 
在此添加标签样式,此处只控制手机端的样式。 
} 

每一个需要独立显示的模块都要 新建一个 table 来排版

例如下图的排版就要建立四个独立的 table,互不干扰,互相独立。

自适应模板制作指南

table 宽度的控制

PC端

采用行内样式控制。为了在手机端控制,添加标签 class=“head”,此 table 在 pc 端显示的宽度为 570px。

<table class="head" bgcolor="#204a9a" border="0" cellpadding="0" cellspacing="0" 
style="border: 1px solid rgb(187, 187, 187); border-image: none;" width="570"> 

手机端

在<head></head>中控制,例如:

@media only screen and (max-width:480px){ .head{ width:100%; height:auto}  //此处是指当在手机端显示时,此 table 的宽度为全屏即
100%。 
} 

img 的宽度控制

PC端

采用行内样式控制。为了在手机端控制,添加标签class=“head”。此 img 在 PC 端显示宽度为 570px,且最大宽度为 570px。

<img class="head" alt="" border="0" 
src="http://www.maildomain.com/SystemTemplateImgPath/left.jpg" 
style="max-width: 570px;" width="570" /> 

手机端

@media only screen and (max-width:480px){ 
.head{ width:100%; height:auto}  //此处是指当在手机端显示时,此 img 的宽度为全屏即 100%。 
    } 

区域模块的隐藏

自适应模板制作指南

这个 table 正常编辑,添加标签 class="nav"。移动端设置隐藏{display:none}如下。

@media only screen and (max-width:480px){ 
.nav{ display:none;} 
} 

手机端显示如下图。

自适应模板制作指南

weinxin
独角兽驿站
公众号