博客手机版页面适配完毕~

虽然这是老主题但是依然还是很美~
所以花了点时间适配了手机页面。(平板页面回头再说吧。)
here comes the code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*....*/
@media screen and (min-width: 38.75em){
/*在这段外面加
#masthead,#menu-container,#main,#colophon{margin:0 auto;width:960px;clear:both;padding-left:40px}
*/	
}
/*....*/
@media screen and (min-width: 38.75em) {
/*在这段外面加
.entry-date{overflow:hidden;width:50px;height:50px;border-right:4px solid #000;color:#000;text-align:center;position:absolute;top:14px;left:-50px;_left:-65px}
.entry-month{width:100%;top:30px;left:0;position:absolute}
.entry-day{width:100%;font-size:2em;top:0;left:0;position:absolute;line-height:1.2em}
.entry-date .sl{line-height:10em}
*/
}
/*....到最后*/
@media screen and (max-width: 38.75em) {
#content { width: 100%; }
#main { width: 98vw; margin-left: 1vw; }
#masthead, #main { padding-left: 0; }
#menu-container { padding-left: 20px; }
#footer { height: 84px; }
#colophon { padding-left: 20px; padding-bottom: 0; width: 80%; margin: 0; }
#sidebar { margin-right: 5%; margin-left: 5%; width: 90%; }
#footer .right { float: none; margin-top: 20px; }
#logo, #logo img { height: 13vw; width: 80vw; }
#logo { margin-left: 5vw; margin-top:1vw; }
#branding { height: 18vw; width: 100vw; }
#comment { width: 95%; }
.comment #comment { width: 91.6%; }
#nav .back, #nav .desc { display: none !important; }
#menu-container { height: 36px; }
#nav li { height: 7px; padding-top: 5px; }
#nav li a { font-size: 17px; }
#toolbar, #site-description, .widget_recent_entries, .widget_categories, .widget_recent_comments, .widget_archive, #ckepop { display: none; }
}

4 条评论 »

  1. 小羊 说:

    hhhh怪我机智咯 :wink:

  2. taoxinhao 说:

    看起来很棒呢!!

  3. S-kias 说:

    看起来不错,不过略微有一点点瑕疵(其实是我手痒了想帮忙改改

  4. 麦葱 说:

    黑白猜,黑白配

发表评论

*

:wink: :twisted: :surprised: :smile: :sad: :rolleyes: :redface: :razz: :question: :neutral: :mrgreen: :mad: :lol: :idea: :exclaim: :evil: :eek: :cry: :cool: :confused: :biggrin: :arrow: