- 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;}
}
手机端显示如下图。
独角兽驿站
公众号