明凯博客MK主题响应式主题设计展示欣赏
自从第一款明凯博客的主题MK主题发布以来，收到的反响还不错。
https://www.limingkai.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%就好。
下面来看看效果：
手机端打开导航的样式：
手机端关闭导航的样式：
小屏平板端：
大屏平板端：
PC电脑端：
大家可以用不同的终端访问明凯博客看看效果。
如果喜欢这款主题，由于主题加了不少广告，现在只是能看到效果。
没有提供下载地址，后期我会将MK主题制作成beta版本发布。
大家在设计响应式的网页存在问题也可以在这里留言向明凯请教。
用3个步骤实现响应式网页设计 asp将数据导出到excel的两种方法
表示我很讨厌广告，对了你这个是基于wordpress的么？
是的呢。我也讨厌广告。~挂上去看有没有效果。
主题已经发布了的。