部落格美化（三）：手機完美瀏覽部落格，美化手機瀏覽部落格

部落格美化（三）：手機完美瀏覽部落格，美化手機瀏覽部落格

本文參考呂大豹的部落格

部落格園在手機端的瀏覽效果並不是很好，所以我們來通過兩步來修改一下

第一步：

在頁首html代碼中添加js代碼

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>

第二步：

修改css代碼

可以使用Google瀏覽器f12進行手機模式的瀏覽，然後再進行修改

1 @media screen and (max-width: 768px){2 3             /*手機顯示css代碼*/4 5 }        

由於模板的不同所以css代碼也就不同，貼出我自己的代碼讓大家參考一下

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 /**日曆控制項樣式開始**/ 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 {/**日曆容器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 a:hover { 88 color: white; 89 text-decoration: none; 90 background-color: #F60;display:none;width:0px; 91 } 92 .CalTodayDay{/**今天日期樣式**/ 93 color:#f60;display:none;width:0px; 94 } 95 #calendar .CalNextPrev a:link,#calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上個月、下個月箭頭樣式**/ 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{/**日曆年度月頭部樣式**/103 width:0px;104 background:white;105 color:black;106 border-bottom:1px solid #666;display:none; 107 }108 /**日曆控制項樣式結束**/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 /* 最新評論等 開始 */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,.catListNoteBook 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 a,.catListLink ul li a,.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 /* 最新評論等 結束 */202 .postBody {203 padding: 15px 2px 5px 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

需要注意的是：

1.css代碼中需要將側邊欄進行隱藏

2.內容頁需要統一的設定一片的顯示大小否則不能全部顯示

3.注意頁面的整體大小

：