完美实现自适应

       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新版本浏览器,看其会不会有完善。

生日快乐

       生日快乐,八周岁的小姑娘,同时祝贺光荣加入少先队,继续努力吧,我的小校友。

海洋赞礼

       首日前往码头的途中看到远处露出来一排高楼,可快到跟前才发现那其实不是高楼,而是一艘停泊在岸边的XXXL尺码的游轮__海洋赞礼号,大到出乎了我的意料,十六万多吨的重量,相当于把仨航母落在一起的样子,航行起来很平稳,几乎感觉不到晃动。船上设施齐全,跳伞、冲浪、篮球、轮滑、碰碰车……体验下来大人小孩都很过瘾。

       接下来三天三个日本城市的走马观花过后,暂且除去政治和历史的因素不谈,对这个东洋岛国还是有了初步的印象,小、整洁、有秩序、讲礼貌、老人多。

       返航过程中感受到了台风康妮的威力,海风呼啸,海浪翻滚,这艘大船也跟着一个劲地摇摆不停。这就是自然的力量,可以撼动一切的力量,这就是真实的大海,风平浪静久了,时不时地来些怒吼,否则会乏的。敬畏自然,海洋赞礼。

分页:[«]1[»]

Powered By Z-Blog 1.8 Walle Build 100427

Copyright 2010-2018 FongPlay Reserved.