分类目录

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

12年前 (2013-04-30) | 30,491 views | 32 条评论 | 本文共2828个字

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

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

响应式方法有很多种：最灵活的（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.js 或 respond.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内的那些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;}
}