游客

标题:完美实现自适应
正文:
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…&hell
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页