Blog-compatible mobile browsing-happy gossip

Blog Park blog compatible mobile browsing-happy gossip I. Practice and reform the blog Park

Let's take a look at the mobile phone version of the official blog of the blog Park, F12 in Chrome, using the mobile mode.

Today, I read my blog and saw Lu dabao's article: In two simple steps, the blog garden supports mobile display. I migrated my blog from the blog garden to issu on github, it is also because the blog in the blog Park does not support browsing and commenting on mobile phones. Today, based on the two simple steps, I did display my blog's mobile phone compatibility. record it.

My blog template: 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 is different from Lu, So I copied the CSS Code directly and made some changes.

1. My blog is in the left and right columns. to split the column, # mainContent on the right has a marin-left: 300px style, so I need to remove it.
2. The a link is sometimes too long and does not contain line breaks. You need to add a piece of code. A {word-wrap: break-word ;}
3. On the details page of the article, the fixed width of the advertisement, comment box, and sharing panel is used. The same width is changed to {width: 100% ;}, and {overflow: hidden} is added to the advertisement }. In later stages, the official blog can consider changing all fixed-width advertisements to responsive advertisements.

Body {font-family: "", Arial, sans-serif; font-size: 14px! Important;} p # 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: "family", Arial, sans-serif; font-size: 16px! Important;}/* supports mobile phone styles */@ 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: #68 BCCA ;}# 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;}/* detailed page style */# green_channel {width: 100% ;}. c_ad_block {width: 100%; overflow: hidden;} # tbCommentAuthor ,. commentbox_title, # tbCommentBody {width: 100% ;}}

Ii. effect display

Homepage display effect:

Article details page-sharing module:

Article details page-Comment module:

Article details page-advertisement:

Iii. Summary

With two simple steps, the blog can be accessed on PCs and mobile devices. In the future, we will check whether there is a need to move from the blog garden to github. Because the blog garden has a large number of user visits, there are still relatively few developers with github accounts, in addition, I have accumulated relevant experience in the blog Park. Technology changes our lives. Can the official blog Park consider making a responsive design transformation for all the theme templates, or the producer of the theme template, and upload the template to complete responsive design.