WEB响应式布局中的Javascript

谈到响应式布局，先前也说过很多了，总体归纳成一句话：通过Media媒体查询特性，在不同尺寸的屏幕上展示不同的CSS样式，真正做到了“一次编写，各屏使用”。目前这种方法只支持在高富帅浏览器上。但是对于IE6-8我们还是要处理的。我目前处理低端浏览器的方法主要是通过判断针对IE6/7/8新增一个专属样式，然后在CSS样式中设置其最小宽度（min-width:1000px），如果在浏览器尺寸小于1000px的时候，底部就会出现滚动条。具体代码如下：

在介绍新方法之前，我们可以先回顾一下先前发表过的相关响应式的知识：

■ 蓦然回首，PC网站移动化已经不再是梦
■ Media Query实现响应式布局的判断汇总
■ 如何实现网页中字体响应式
■ 【实战】用Media Query实现响应式Web布局
■ 【精品】推荐15款响应式Web设计工具
■ 蓦然回首，PC网站移动化已经不再是梦

其实上面的方法是最简单的处理方法了，今天主要是想说下另外一种方法：使用Javascript来实现响应式布局。其原理是：针对浏览器状态做出不同反应的JavaScript代码。

先前在百度博客上看过方法，我自己也总结了下，主要分为两种方法：

onresize

Onresize其实就是一个浏览器事件啊，在IE中也是可以使用的，我们来看下面的代码：

我们只需要为全局对象window绑定一个resize事件，然后在事件处理函数中对浏览器当前的状态作出判断，然后运行相应的JavaScript代码即可。

matchMedia

window.matchMedia允许我们使用CSS3中媒体查询状态在JavaScript进行状态响应，应用起来也很简单。看如下代码：

此时，window.matchMedia返回了一个实例mq，它包含一些属性和方法，其中我们会用到的是以下三个：

★ media — 该属性返回你在设置的媒体查询语句，比如上面的mq.media会返回”(min-width: 500px)”

★ matches — 该属性返回目前对于查询状态的匹配情况，如果匹配了查询状态，返回true，反之返回false，我们一般这样使用：

★ addListener — 我们可以运用该方法监听变化，一旦变化满足查询条件，就做出相应反应。我们来看下面的代码：

代码非常简单明确，但是需要注意的一点是你必须在addListener之后马上运行事件处理函数WidthChange，这能确保你的代码将会在页面载入载入中或者载入前完成初始化。如果没有这行代码，如果用户不去手动改变浏览器的尺寸，即使满足了查询条件，WidthChange函数也不会自行调用。

目前，现代浏览器都支持matchMedia方法，如果你需要在旧版本的浏览器中使用matchMedia，有心的程序员已经编写出了相应的替代的代码库。

总结

两种方法都可以使用，个人比较偏向于第二种吧，简单方便。其实响应式JavaScript的库非常多，现在比较流行的几个分别是：SimpleStateManager、enquire.js、yepnope.js以及大名鼎鼎的Modernizr。它们在原生的matchMedia方法的基础上，添加了许多非常实用的功能，为我们编写响应式JavaScript代码提供了不少帮助。