简单几步让你的主题支持响应式

网络博客 郑永 9645℃ 33评论 显示侧边栏

自从用wordpress折腾博客以来,对主题下了不少功夫,虽说一直不敢太投入,可最终忍不住也出了个zyxptt主题,既然响应式朝我们继续袭击而来,那么咱们菜鸟级也不甘落后,怎么说也要给主题加个响应式支持,于是就有了这篇菜鸟级响应式方法。

很多人可能觉得响应式主题很复杂,但其实挑一个简单的方法也是可行的,虽然达不到大师级的设计方法,但基本的响应式效果能实现也算不错的,当然你也可以通过安装手机主题插件来达到响应式效果,不过鉴于咱们虽然没技术,但也不懒,稍微有点耐心,就能给你的主题支持响应式了,至少不用为了响应式而换主题,好吧,啰嗦完了,咱们开始吧。

xiangyingshi md-patterns1

响应式方法有很多种:最灵活的(Mostly Fluid),列内容往下排(Column Drop),布局切换(Layout Shifter),最简单(Tiny Tweaks),屏幕以外的空间利用(Off Canvas),我们现在折腾的原理是利用:media query。

这个方法很简单,比较适合菜鸟,重要的是一段css代码和头文件代码就可以实现了,当然,如果要想完美,还是得花一点点功夫,不过那只是时间问题,方法就这么简单。

首先第一步,页头加一段代码:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

第二步,以为IE8及以下的浏览器不支持media query。你可以使用media-queries.jsrespond.js 。这样IE就能支持media query了。

<!–[if lt IE 9]> <script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script> <![endif]—>

第三步,打开这个例子链接,观察一下,比如放大窗口和缩小窗口试试: 查看源代码可以得到一段我们需要放在css里面的代码,认真观察的话,你会发现跟我下面提供的不一样,个人感觉只要这两个尺寸搞定,就OK,代码如下:

480px-or-less

上面的代码意思是会把分辨率在480px内的那些css参数替换成以上的参数,如果必要时候,还可以在这里把不想要的div给隐藏掉,可以用这句:display:none,比如下面是我的代码:

/* for 890px or less */
@media screen and (max-width: 890px) {
#wrapper {width: 100%;}
#nav{width:100%;background:#696969;height:auto;}
#nav li{WIDTH:auto;background:#696969;height:auto;}
#body {width:100%;}
#content {width:100%;position:none;float:left;}
#sidebar {width: 299px;float:right;}
#contentin{margin-right:300px;}
#content .mainbox h2{width:auto;}
#content .mainbox p{width:auto;max-height:none;overflow:visible;}
#content .i{width:auto;}
#comments form textarea{width:62%;}
#content .post img{margin-left:-25px;width:100%;height:auto;}
.comment-text{width:auto;}
#comments .children{margin-left:-10px;}
#footer{width:auto;height:auto;}
.wzads{margin-left:-50px;}
.sbt{margin-left:-10px;}
}

/* for 760px or less */
@media screen and (max-width: 760px) {
#wrapper {width: 100%;}
#nav{width:100%;background:#696969;height:auto;}
#nav li{WIDTH:25%;background:#696969;height:auto;}
#navloading {display: none;}
#content .location{display: none;}
#body {width:100%}
#content {width: 100%;}
#contentin{margin-right:0;}
#sidebar {width: 100%;}
#content .mainbox h2{width:auto;}
#content .mainbox p{width:auto;max-height:none;overflow:visible;}
#content .i{width:auto;}
#comments form textarea{width:100%;}
.ratings{display: none;}
#content .post img{margin-left:-25px;width:100%;height:auto;}
.ggads{display: none;}
.wzads{display: none;}
.news{display: none;}
.comment-text{width:auto;}
#commentad{display: none;}
#comments .children{margin-left:-10px;}
#footer{width:auto;height:auto;}
}

当然,以上是我的代码,你绝对不可以直接复制着用,你要按照你的样式修改,可能我的改得比较多,如果你的主题跟上面的例子一样的话,那么就相当简单了,如果你喜欢折腾,还可以多加一些尺寸的支持,不过个人感觉这个两个够你折腾了,也够用了。

这里提供一个各种设备尺寸参考,你可以随时预览,个人觉得着重适应iphone和ipad的尺寸,比较常见,其他的就不用考虑了。

xiangyingshichicun

好啦,慢慢调整吧,方法简单吧,当然这其中有很多技巧可以根据你的主题发挥想象,这里顺便提供一个响应式设计参考,响应式设计的9个css技巧,想了解更多布局,请看这里:多设备的web布局模式,如果看了这个教程还不明白,那么参照这个简单的实例吧。

最后就是本站的主题已经支持响应式了,如果可以的话,使用你的设备帮忙测试一下,当然你也可以打开浏览器,放大缩写窗口来体验一下,第一次折腾,难免有不妥之处,稍后有时间,慢慢修改,还可以丰富一下小窗口下的功能,比如搜索灯,另外本人的zyxptt主题欢迎免费下载使用

打开这个可以看见本站在各种设备的效果:http://www.responsinator.com/?url=xptt.com

转载请注明:郑永博客 » 简单几步让你的主题支持响应式

(33)个小伙伴在吐槽
Loading...
  1. 万戈2013-04-30 09:10 Google Chrome 26 Windows 7 回复

    越来越专业了呀,响应式布局都用上了,高端!

    沙发!
    • 郑永2013-04-30 09:13 Android Webkit 4 Android 4.1.2 回复

      呵呵,还好有个简单方法啊,不然真心信心去学啊。你们专业啊,我这搞大几个小时啊。

  2. 空空裤兜2013-04-30 11:27 Google Chrome 26 Windows 7 回复

    我是直接插件搞定

    板凳!
    • 郑永2013-04-30 11:37 Google Chrome 26 Windows 8 回复

      嗯,我原来也是用插件,但是不够原生,所以就折腾了。

  3. 七零后CFO2013-04-30 16:06 Google Chrome 26 Windows 7 回复

    换现在的主题后,我现在连插件都省了,整体效果还是不错的。

    地板!
    • 郑永2013-04-30 20:21 Firefox 20 Windows XP 回复

      恩,现在很多主题插件一并搞定,很不错。

    • 郑永2013-04-30 20:27 Firefox 20 Windows XP 回复

      你网站不能评论了,你网站没有任何可以联系到你的地方,就在这里发了,希望能收到邮件。 评论发不了是很郁闷的,尤其是自己没发现问题。本来想继续测试,那个评论框都显示不出来,汗。。。还是自带的评论好。

  4. 小蝴蝶2013-04-30 20:01 Mozilla Compatible iPhone iOS 6.1 回复

    效果不错 我在用手机看~

    4楼
    • 郑永2013-04-30 20:23 Firefox 20 Windows XP 回复

      恩恩 :) 谢谢哈。

    • 郑永2013-04-30 23:11 Firefox 20 Windows XP 回复

      很多人把导航给去掉,好像不好控制效果,换了个选择性下拉导航。

    • 大发2013-05-01 13:03 Firefox 20 Windows 7 回复

      哥优雅的导航

    • 郑永2013-05-01 21:05 Firefox 20 Windows XP 回复

      你那里手机下压根就没看到导航栏。。汗。。

    • 大发2013-05-01 21:21 Firefox 20 Windows 7 回复

      。。。。导航在下面

    • 郑永2013-05-01 21:24 Firefox 20 Windows XP 回复

      也没有啊。。。~~~

    • 郑永2013-05-01 21:25 Firefox 20 Windows XP 回复

      我擦,看到了。。黑色,差点以为是我的手机导航。。。

    • 郑永2013-05-01 21:31 Firefox 20 Windows XP 回复

      你这导航还不错,在600 x 1024分辨率下,结果是上下都有。不同分辨率不同位置。

    • 大发2013-05-01 21:49 Firefox 20 Windows 7 回复

      必须优雅

    • 郑永2013-04-30 23:24 Firefox 20 Windows XP 回复

      就是这个方法http://tinynav.viljamis.com/,试了下感觉还是我这样好,可以直观的看到菜单,去选择的话,估计没人按。

  5. 佐仔2013-05-01 08:48 Google Chrome 26 Windows 7 回复

    我觉得你的还是比较复杂,可以看看我这篇文章:WordPress主题自适应网页的设计思路
    http://www.jinbo123.com/3641.html
    少用绝对宽度,但我发现你用了太多的绝对宽度,如果这样,那你将要一个一个屏幕去测试了。

    5楼
    • 郑永2013-05-01 10:05 Firefox 20 Windows XP 回复

      不用一个一个去测试,我就弄了两个模式,另兄啊尺寸的都差不多了。可以看看我文章最后的那个连接,你的方法我去看看。

  6. 公子2013-05-01 18:54 ChromePlus 1 Windows XP 回复

    @media比较方便了。。。 :twisted:

    6楼
  7. yxiao2013-05-01 21:40 Google Chrome 26 Windows XP 回复

    手机上确实很需要这个。不过懒得弄了。

    7楼
    • 郑永2013-05-02 09:09 Firefox 20 Windows XP 回复

      恩,起先也是很懒,但是把它感觉简单了,就很快了,哈哈。

  8. 从良未遂2013-05-03 14:56 Google Chrome 26 Windows 7 回复

    这个貌似不错啊

    8楼
    • 郑永2013-05-04 07:07 Google Chrome 26 Windows XP 回复

      不是貌似,是肯定,哈哈。

  9. zwwooooo2013-05-05 17:52 Firefox 20 Windows 7 回复

    嘻嘻,我现在用的主题太多元素了 ,所以不搞自适应了

    9楼
    • 郑永2013-05-05 21:27 Firefox 20 Windows XP 回复

      恩,但也不影响原来主题,用这种方法的话,就是测试,看到哪里不行,直接代码加上或屏蔽掉就可以了。

  10. 集趣2013-05-09 11:39 Google Chrome 26 Windows 7 回复

    响应式的要兼容很多设备,太繁琐了

    10楼
  11. 一念花开2013-05-10 21:47 Android Webkit Android 2.3.7 回复

    还好,手机效果很不错。就是二级导航栏有重叠。

    11楼
    • 郑永2013-05-11 06:35 Google Chrome 26 Windows XP 回复

      恩,这个不像折腾了,汗。。之后补上。

  12. 神经大爆炸2013-11-27 21:04 Internet Explorer 9 Windows 7 回复

    手机版本 我 都还没开通…

    正琢磨 怎么 搞   大哥有没有好的建议啊!

    12楼
gravatar
发表我的评论
取消评论


Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址