完美实现自适应
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新版本浏览器，看其会不会有完善。
