« 生日快乐备案完成1/2 »

完美实现自适应

       ZBLOG1.8版本自带的default模板在PC端显示良好,但在手机端就显得太小了,看的费劲。这几天就开始研究自适应、响应式页面布局,为的是让峰玩网的ZBLOG能在手机屏幕上不显示右侧导航栏,而在iPad及PC屏幕上则保持原貌。目标明确后就开始上手实践了,过程还是很复杂的,但也乐在其中,目前算是完美实现了。
       先把正确的方法展示出来:
       一.改写原default.css里的部分代码:
#divPage{
background:url("default/bg n.gif") repeat-y center;
}
#divSidebar{
display:none;
}
#divMain{
width:860px;/*前值688px 后调整为860px 此值控制整个主要部分的宽度,非常重要!!!!*/
}
div.post {
width:100%;/*前值668px*/
}
div.post .post-title{
width:100%;/*前值639px*/
}
div.post .post-footer{
width:100%;/*前值666px*/
}
div.post div.post-body{
width:100%;/*前值640px*/
}
       二.用PS把bg.gif图片里的中间偏右的部分涂白,在原路径下另存为bg n.gif。
       三.把这个改写后的全部代码融入到原default.css里,用到“@media screen and (max-device-width: 560px) { }”和@media screen and (min-device-width: 560px) { }标签。
       四.在single.html、default.html……等模板文件里增加代码段,“<meta name="viewport" content="width=device-width">”。
       五.在写新文章的时候,用rem赋值字号,用百分比赋值图片。
       记录一下心得体会吧:最初的时候,找了一个google.css的改了一点点,能实现的效果仅是让右边栏不显示,而且其他装饰什么的也都没有了,原理就是简单粗暴地把各个关键的div层的宽度值改成100%;后来觉得不满意,又开始研究起default.css,这阶段的工作量是最大的,先摸索着把default.css改写成了default n.css,把这两个css同放在STYLE路径下,修改POST路径下的单个文章,在里面加入“ metap name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"”和两句 link(在不同屏幕宽度下调用不同的css),一通搞下来,确实已经能够实现自适应的效果了,但问题是一旦修改文章,提交保存后就恢复原样了,原因就是提交按钮会调用默认模板里面的single.html等文件更新文章,所以手工修改的html文件就又被改回去了;这是不可接受的,开始了最后的调整,思路是把两个css文件合并到一起,用@media语句作为选择标识,并把 link语句还原为原来的样子,期间经过了大量地调试修正,发现 meta语句里不能包含"initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"这些参数,否则在iPhone屏幕上显示不正确,即便如此,还是发现了一个小问题,如果网页内容的形状是扁形的,在安卓手机上显示没问题,但在苹果手机上则会放大显示,这也是为什么search.html和tags.html没有按上述原则修改的原因,以后可以持续关注并测试iPhone新版本浏览器,看其会不会有完善。

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Walle Build 100427

Copyright 2010-2018 FongPlay Reserved.