Blog beautification (3): mobile phones browse blogs perfectly, and mobile phones browse blogs.

Blog beautification (3): mobile phones browse blogs perfectly, and mobile phones browse blogs.

This article is based on his blog

The browsing effect of the blog garden on the mobile phone is not very good, so let's modify it in two steps.

Step 1:

Add js Code to the top html code

1 <script>
2 var content = 'width=device-width, initial-scale=1 user-scalable=no';
3 var viewport = document.createElement('meta');
4 viewport.setAttribute('name', 'viewport');
5 viewport.setAttribute('content', content);
6 document.head.appendChild( viewport );
7 </script>

Step 2:

Modify css code

You can use Google's f12 browser to browse the Mobile Phone mode and then modify it.

1 @media screen and (max-width: 768px) {
2 
3 / * Mobile phone display css code * /
4
5} 

The css code is different because of the different templates. Post my own code for your reference.

1 @ media screen and (max-width: 768px) {2 3 # main 4 {5 min-width: 300px; 6 padding-right: 10px; 7 8} 9 # mainContent. forFlow {10 margin-left: 20em; 11 float: none; 12 width: auto; 13 margin-left: 0px; 14} 15 16 # mainContent {17 min-height: 200px; 18 padding: 0px 0px 10px 0; 19 * padding-top: 10px; 20-o-text-overflow: ellipsis; 21 text-overflow: ellipsis; 22 overflow: hidden; 23 word-break: break-all; 24 25 float: left; 26 27 width: 100%; 28 margin-left: 0px; 29 margin-right: 0px; 30} 31 # blogTitle {32 height: 90px; 33 background: # fff; 34 clear: both; 35 background-repeat: no-repeat; 36 background-image: url ("http://files.cnblogs.com/files/itsuibi/logosmall.gif"); 37} 38 # mainContent {39 min-height: 200px; 40 padding: 0px 0px 10px 0; 41 * padding-top: 10px; 42-o-text-overflow: ellipsis; 43 text-overflow: ellipsis; 44 overflow: hidden; 45 word-break: break-all; 46 47 float: left; 48/* margin-left:-20em; */margin-right: 20px; display: inline; 49 width: 100% 50} 51 # sideBar {52 width: 0px; 53 min-height: 200px; 54 padding: 0px 0 0px 5px; 55 float: right; 56-o-text-overflow: ellipsis; 57 text-overflow: ellipsis; 58 overflow: hidden; 59 word-break: break-all; 60 display: none; 61} 62. newsItem. catListTitle {63 display: none; 64 width: 0px; 65} 66. newsItem, # blog-calendar {67 margin-bottom: 15px; text-indent: 0; padding: 10px; background: # FAFCFD; border-radius: 7px; box-shadow: 1px 1px 2px # A7A8AD; line-height: 1.5; display: none; width: 0px; 68} 69/** calendar control style start **/70 # calendar {71 margin-bottom: 15px; padding: 5px; border-radius: 7px; box-shadow: 1px 1px 2px # A7A8AD; background: # fff; display: none; width: 0px; 72} 73 # calendar. cal {74 width: 0px; 75 line-height: 1.5; display: none; 76} 77 # calendar th {padding: 2px 5px; display: none; width: 0px ;} 78 # calendar td {padding: 2px 5px; display: none; width: 0px;} 79 # calendar td a {display: block; display: none; width: 0px;} 80. cal {/** calendar container table **/81 border: none; 82 color: #666; display: none; width: 0px; 83} 84 # calendar table a: link, # calendar table a: visited, # calendar table a: active {85 font-weight: bold; display: none; width: 0px; 86} 87 # calendar table: hover {88 color: white; 89 text-decoration: none; 90 background-color: # F60; display: none; width: 0px; 91} 92. calTodayDay {/** today's date style **/93 color: # f60; display: none; width: 0px; 94} 95 # calendar. calNextPrev a: link, # calendar. calNextPrev a: visited, # calendar. calNextPrev a: active {/** arrow style of last month and next month **/96 font-weight: bold; 97 background-color: white; display: none; width: 0px; 98} 99. calDayHeader {100 border-bottom: 1px solid # ccc; display: none; width: 0px; 101} 102. calTitle {/** calendar year and month head style **/103 width: 0px; 104 background: white; 105 color: black; 106 border-bottom: 1px solid #666; display: none; 107} 108/** calendar control style ending **/109. catListTitle {110 background: #390; border-bottom: 1px solid #006600; border-top-left-radius: 7px; border-top-right-radius: 7px; color: # FFFFFF; font-size: 1.2em; 111 height: 1.8em; 112 line-height: 1.8em; 113 padding: 5px; 114 text-indent: 0.5em; text-shadow: 1px 1px 0 rgba (0, 0, 0, 0.3); display: none; width: 0px; 115} 116. catListComment {117 line-height: 1.5; display: none; width: 0px; 118} 119. divRecentComment {120 text-indent: 2em; 121 color: #666; display: none; width: 0px; 122} 123 # sideBarMain ul {124 line-height: 1.5; display: none; width: 0px; 125} 126/* Latest comments */127 # AjaxHolder_UpdatePanel1, 128 # AjaxHolder_PostComment_divCommnentArea, 129 # profile, 130. entrylist, 131. gallery132 {133 background: none repeat scroll 0 0 # FFFFFF; 134 border-radius: 7px; 135 box-shadow: 1px 1px 2px # A7A8AD; 136 margin: 0 0 15px 0; 137 min-height: 200px; 138 overflow: hidden; 139 padding: 0 15px; 140 text-overflow: ellipsis; 141 word-break: break-all; display: none; width: 0px; 142} 143 # AjaxHolder_PostComment_divCommnentArea {padding: 10px; display: none; width: 0px;} 144 # profile, 145. entrylist, 146. gallery147 {padding: 10px; display: none; width: 0px;} 148. catListEssay ,. catListLink ,. catListNoteBook, 149. catListTag, 150. catListPostCategory, 151. catListPostArchive, 152. catListImageCategory, 153. catListArticleArchive, 154. catListView, 155. catListFeedback, 156. mySearch, 157. catListComment, 158. catListBlogRank, 159. catList, 160. catListArticleCategory161 {margin-bottom: 15px; background: # FAFCFD; border-radius: 7px; box-shadow: 1px 1px 2px # A7A8AD; overflow: hidden; zoom: 1; display: none; width: 0px;} 162. catListEssay ul li ,. catListLink ul li ,. catlistnotebooks ul li, 163. catListTag ul li, 164. catListPostCategory ul li, 165. catListPostArchive ul li, 166. catListImageCategory ul li, 167. catListArticleArchive ul li, 168. catListView ul li, 169. catListFeedback ul li, 170. catListComment ul li, 171. catListBlogRank ul li, 172. catList ul li, 173. catListArticleCategory ul li174 {text-indent: 1em; padding: 10px 5px; border-bottom: 1px solid # DADFE1; border-top: 1px solid # FFFFFF; overflow: hidden; display: none; width: 0px;} 175. catListEssay ul li ,. catListLink ul li ,. catListNoteBook ul li a, 176. catListTag ul li a, 177. catListPostCategory ul li a, 178. catListPostArchive ul li a, 179. catListImageCategory ul li a, 180. catListArticleArchive ul li a, 181. catListView ul li a, 182. catListFeedback ul li a, 183. catListComment ul li a, 184. catListBlogRank ul li a, 185. catList ul li a186. catListArticleCategory ul li a187 {text-indent: 1em; font-size: 12px; display: none; width: 0px;} 188. catListEssay ul li a: hover ,. catListLink ul li a: hover ,. catListNoteBook ul li a: hover, 189. catListTag ul li a: hover, 190. catListPostCategory ul li a: hover, 191. catListPostArchive ul li a: hover, 192. catListImageCategory ul li a: hover, 193. catListView ul li a: hover, 194. catListFeedback ul li a: hover, 195. catListArticleArchive ul li a: hover, 196. catListComment ul li a: hover197 {text-decoration: none; display: none; width: 0px;} 198. divRecentCommentAticle {padding: 0 10px; display: none; width: 0px;} 199. divRecentComment {padding: 10px; font-size: 12px; display: none; width: 0px;} 200 # AjaxHolder_PostComment_divCommnentArea td {padding: 5px 0; display: none; width: 0px ;} 201/* end with the latest comment */202. postBody {203 padding: 15px 2px 5px; 204 line-height: 1.5; 205 color: #000; 206 border-bottom: 1px solid # ccc; 207} 208. postBody img {width: 320px; height: auto; float: left ;} 209 ******************************* */210}View Code

Note that:

1.hide the sidebar in CSS code

2. You must set the display size of each part on the Content Page.

3. Pay attention to the overall page size

: