Blog Park blog Compatible mobile browsing

First, hands-on practice, the transformation of the blog park

First look at the blog Park Official blog mobile phone version, in Chrome inside F12, using mobile mode.

Look at the blog today, see Lu Tai Leopard article: Simple two steps to let the blog Park support mobile phone display, before their blog from the blog Park to the issu of GitHub, but also considering the blog Park blog can not be very good support mobile phone-side browsing and comment. Today, according to a simple two-step, do your own blog can be compatible with mobile phone display, record.

My blog template is: Http://www.cnblogs.com/SkinUser.aspx?SkinName=SimpleBlue

1. Add JS Code, refer to Lu's blog post

2. Add CSS code. My blog template and Lu's different, so I directly copied the CSS code, but also made some changes.

1. My blog is left and right two columns, in order to sub-column, the #maincontent has a marin-left:300px style, so to be removed.
2. A link is sometimes too long, there is no line break display, you need to add a piece of code. A{word-wrap:break-word;}
3. The article details page, designed to AD, comment box and share panel used fixed width, changed to {width:100%;}, and added {Overflow:hidden} to the ad. Blog Park official late may consider the fixed-width ads to be replaced by responsive ads.

Body{font-family:"Microsoft Jas Black", Arial,sans-serif;font-size:14px!important;}Div#license{Background-color:#f8f8ee;Border:Solid 1px #e8e7d0;padding:5px 10px 0px 10px;Min-height:10px;Margin-bottom:10px;Margin-top:10px;Color:#666666;}. Post{Background-color:#fff;Border:1px solid #F5F5F5;}#cnblogs_post_body P{font-family:"Microsoft Jas Black", Arial,sans-serif;font-size:16px!important;}/*Support Phone Style*/@media screen and (max-width:768px){#mainContent {margin-left:0}a{Word-wrap:Break-word; }#main, #mainContent{width:100%; }#sideBar, Body > A, #navList, #navigator,. Postdesc A, #homepage_top_pager{Display:None; }#blogTitle a{font-size:30px; }#blogTitle H2{font-size:16px; }#home{Background-image:None; }. Posttitle a{font-size:22px; }. Postcon,. Postcon a{font-size:16px; }. Day{margin:0 2%; }. Postcon a{Padding-left:0; }. Postdesc{width:100%;font-size:12px; }#home{Background-color:#68BCCA; }#mainContent. Forflow{margin:4px 0 0 0; }#blogTitle{ Left:0; }#mainContent. Postbody{width:100%; }. Post{padding:0 4%; }#header{background-size:46px; }. Topiclistfooter{width:100%;text-align:Center;padding:0;Height:40px; }. Topiclistfooter A:link{font-size:12px; }/*Article detail page style*/#green_channel{width:100%; }. C_ad_block{width:100%;Overflow:Hidden; }#tbCommentAuthor,. Commentbox_title, #tbCommentBody{width:100%; }}

Second, the effect shows

Homepage Display effect:

Article detail page-share module:

Article detail Page-comment module:

Article details page-ad:

Iii. Summary

With a simple 2-step process, the blog park can be accessed normally under PC and mobile devices. Follow-up considerations to see if there is a need to move from the blog Park to GitHub, because of its own blog park user access is relatively large, there is a relatively small number of GitHub account developers, and previously accumulated experience in the blog park. Technology changes life. Blog Park official can consider to all the theme template to do a responsive design transformation, or theme template creator, upload template, do a responsive design.

Blog Park blog Compatible mobile browsing