明凯博客

关注网站技术,一个特立独行的程序员

明凯博客MK主题响应式主题设计展示欣赏

自从第一款明凯博客的主题MK主题发布以来,收到的反响还不错。

http://www.aimks.com/the-first-mk-theme-simple-orange.html

前几天一个网友评论MK主题说,这个主题很干净清爽简单,很喜欢,可惜不是响应式。

以前都是用插件来实现手机端访问的效果的,当然插件肯定没有纯代码速度好,而且插件的样式也不是我自己喜欢的。

于是就萌生了自己设计响应式主题,经过一天的修改,主题终于完成了。

该主题在手机,平板上面都显示非常好,主要分了三种类型,一种是pc,二是平板三是手机。

下面也贴出更改的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
	@media (max-width: 980px) { 
	.main,.footer>div,.footer ul{width: 100%;}
	.content{width: 96%;}
	.header div,.nav div{width: 768px;}
	body{min-width: 100%;}
	.body{background: white;}
	.sidebar,#roll{display: none;}
	.nav ul.menu li a {padding: 0 10px;}
}
	@media (max-width: 768px) {
	.header{height: auto;}
	.header div,.nav div{width: 100%;}
	.header p.title,.header p.tagline,.header form{width: 100%;float: none;text-align: center;margin: 0;padding: 0;}
	.header p.title{background: none;max-width: 100%;}
	.nav{display: none;}
	.header .topdh{display: block;}
	.nav ul.menu li{float: none;width: 100%;text-align: center;border-top: 1px solid #444;}
	.nav ul.menu li a{border: none;width: 100%;}
}

手机端导航的JS也非常简单:

1
2
3
$("#topdh").click(function(){
    	$(".nav").toggle(500);
    });

其实响应式主题的修改并不多,主要是要对样式进行针对性的调整大小,然后宽度不要设置固定宽度,100%就好。

下面来看看效果:

手机端打开导航的样式:

mk1

手机端关闭导航的样式:

mk2

小屏平板端:

mk3

大屏平板端:

mk4

PC电脑端:

mk5

大家可以用不同的终端访问明凯博客看看效果。

如果喜欢这款主题,由于主题加了不少广告,现在只是能看到效果。

没有提供下载地址,后期我会将MK主题制作成beta版本发布。

大家在设计响应式的网页存在问题也可以在这里留言向明凯请教。

, , ,

相关文章

3 条评论 “明凯博客MK主题响应式主题设计展示欣赏

发表评论

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