博客美化（三）：手机完美浏览博客 - 六月天空的芬芳
程序员文章站
2022-06-04 19:47:07
...
本文参考吕大豹的博客
View Code
博客园在手机端的浏览效果并不是很好，所以我们来通过两步来修改一下
第一步：
在页首html代码中添加js代码
1
第二步：
修改css代码
可以使用谷歌浏览器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 .gallery 132 { 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 .gallery 147 {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 .catListArticleCategory 161 {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 li 174 {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 a 186 .catListArticleCategory ul li a 187 {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:hover 197 {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 }
需要注意的是：
1.css代码中需要将侧边栏进行隐藏
2.内容页需要统一的设置一下图片的显示大小否则不能全部显示
3.注意页面的整体大小
效果图：