博客美化（三）：手机完美浏览博客_html/css

博客美化（三）：手机完美浏览博客_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 11:18:28

Original

1125 Leute haben es durchsucht

本文参考吕大豹的博客

博客园在手机端的浏览效果并不是很好，所以我们来通过两步来修改一下

第一步：

在页首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>

Nach dem Login kopieren

第二步：

修改css代码

可以使用谷歌浏览器f12进行手机模式的浏览，然后再进行修改

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

Nach dem Login kopieren

由于模板的不同所以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 }

Nach dem Login kopieren

需要注意的是：

1.css代码中需要将侧边栏进行隐藏

2.内容页需要统一的设置一下图片的显示大小否则不能全部显示

3.注意页面的整体大小

效果图：