你的位置:首页 > 网页设计

[网页设计]博客园博客兼容手机浏览


一、动手实践、改造博客园

今天看博客,看到吕大豹的文章:简单两步让博客园支持手机端显示, 之前自己把博客从博客园迁移到了github的issu中,也是考虑到博客园的博客不能很好的支持手机端浏览和评论。今天根据简单两步,确实把自己的博客能兼容手机显示了,记录一下。

我的博客模板是:http://www.cnblogs.com/SkinUser.aspx?SkinName=SimpleBlue

1.添加js代码,参照吕的博客文章

 

2.添加CSS代码。我的博客模板和吕的不同,所以我直接复制了CSS代码,也做了一些改动。

  1. 我的博客是左右两栏,为了分栏,右侧的#mainContent有一个marin-left:300px的样式,所以要去掉。
  2. a链接有时太长,没有换行显示,需要加一段代码。 a{word-wrap: break-word;}
  3. 文章详细页,设计到广告、评论框和分享panel使用了固定宽度,同一改成了{width:100%;},而且对广告还添加了{overflow:hidden}。博客园官方后期可以考虑把固定宽度的广告都换成响应式的广告。

 

 1 body { 2   font-family: "微软雅黑",Arial,sans-serif; 3   font-size: 14px !important; 4 } 5  6 div#license { 7   background-color: #f8f8ee; 8   border: solid 1px #e8e7d0; 9   padding: 5px 10px 0px 10px; 10   min-height: 10px; 11   margin-bottom: 10px; 12   margin-top: 10px; 13   color: #666666; 14 } 15  16 .post { 17   background-color: #fff; 18   border: 1px solid #F5F5F5; 19 } 20  21 #cnblogs_post_body p { 22   font-family: "微软雅黑",Arial,sans-serif; 23   font-size: 16px !important; 24 } 25  26 /*支持手机样式*/ 27 @media screen and (max-width: 768px) { 28   #mainContent { 29     margin-left: 0 30   } 31  32   a { 33     word-wrap: break-word; 34   } 35  36   #main, #mainContent { 37     width: 100%; 38   } 39  40   #sideBar, body > a, #navList, #navigator, .postDesc a, #homepage_top_pager { 41     display: none; 42   } 43  44   #blogTitle a { 45     font-size: 30px; 46   } 47  48   #blogTitle h2 { 49     font-size: 16px; 50   } 51  52   #home { 53     background-image: none; 54   } 55  56   .postTitle a { 57     font-size: 22px; 58   } 59  60   .postCon, .postCon a { 61     font-size: 16px; 62   } 63  64   .day { 65     margin: 0 2%; 66   } 67  68   .postCon a { 69     padding-left: 0; 70   } 71  72   .postDesc { 73     width: 100%; 74     font-size: 12px; 75   } 76  77   #home { 78     background-color: #68BCCA; 79   } 80  81   #mainContent .forFlow { 82     margin: 4px 0 0 0; 83   } 84  85   .postBody { 86   } 87  88   #blogTitle { 89     left: 0; 90   } 91  92   #mainContent .postBody { 93     width: 100%; 94   } 95  96   .post { 97     padding: 0 4%; 98   } 99 100   #header {101     background-size: 46px;102   }103 104   .topicListFooter {105     width: 100%;106     text-align: center;107     padding: 0;108     height: 40px;109   }110 111   .topicListFooter a:link {112     font-size: 12px;113   }114 /*文章详细页样式*/115   #green_channel {116     width: 100%;117   }118 119   .c_ad_block {120     width: 100%;121     overflow: hidden;122   }123 124   #tbCommentAuthor,.commentbox_title,#tbCommentBody {125     width: 100%;126   }127 }

 

 

 

二、效果展示

首页显示效果:

image

文章详细页-分享模块:

image

文章详细页-评论模块:

image

 

文章详细页-广告:

image

 

三、总结

通过简单的2个步骤,就实现了博客园能在pc和mobile设备下,正常访问了。后续考虑看看是否有从博客园搬迁到github上的必要,因为本身博客园的用户访问量相对较多,有github账户的开发者还是相对较少,而且之前积累博客园相关的经验。技术改变生活。博客园官方是否可以考虑给所有的主题模板做一个响应式设计改造,或者主题模板的制作者,上传模板上来,就做好响应式设计。