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

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

/*....*/
@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个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注