说起响应式CSS，大家一定都不会陌生。在各种大小各种尺寸的电脑、平板、智能手机百花齐放的今天，响应式CSS通过运用CSS3中的@media媒体查询特性，在不同尺寸的屏幕上展示不同的CSS样式，真正做到了“一次编写，各屏使用”，实在是广大前端工程师和设计师喜闻乐见的好帮手。与此同时，各种CSS框架，例如Foundation、Bootstrap、Semantic，也打着“响应式”的旗号，发展的红红火火，在全世界范围内吸收了不少粉丝、铁丝甚至脑残粉。
一般的文章写到这里，必然会有一个“但是”来表示转折，然后开始对前面提到的东西各种黑。但是（果然有这货。。。），我们今天不是要来黑响应式CSS的，再次保证，绝对不是来黑响应式CSS的（貌似有点此地无银三百两的感觉）。前面所说的这些废话、不废话只是为了引出今天的主题 — 响应式JavaScript。
有人可能会问了，什么是响应式JavaScript，这货对我到底有啥用？前面的同学淡定一点，我们先来思考一个问题：一般来说，我们在响应式CSS中会做的一件事情就是对于不同尺寸的屏幕对显示不同的CSS样式，ok这很好，但是如果我们要对不同尺寸的屏幕运行不同的JavaScript代码呢？没错，这就是响应式JavaScript。
响应式JavaScript指的是针对浏览器状态做出不同反应的JavaScript代码。
其实，响应式JavaScript早已不是什么新鲜玩意，早在很早很早以前它就已经悄悄的躺在了我们的浏览器中，当然这里指的是现代浏览器，绝对没有黑IE的意思，我保证绝对没有，我平时用网银什么的都用IE的么么。响应式JavaScript掌握起来也非常非常的容易，只需要掌握了两个API，你就可以大声宣布，我已经掌握了响应式JavaScript，妈妈再也不用担心我不会响应式啦！
响应式JavaScript API之一 — onresize
各位同学看到onresize前面的前缀on就明白了，其实这货就是一个浏览器事件啊！好像这货在IE中也是可以使用的嘛！这货用起来也是非常简单的嘛！我们来看下面的代码：
<code>var resizeMethod = function(){
if (document.body.clientWidth < 768) {
console.log('mobile');
}
};
//绑定事件处理函数到resize事件
window.addEventListener("resize", resizeMethod, true);
</code>看，就是这么霸气，就是这么简单，我们只需要为全局对象window绑定一个resize事件，然后在事件处理函数中对浏览器当前的状态作出判断，然后运行相应的JavaScript代码即可。是不是一秒钟就学会了。当然，这个粗暴简单的API并不是我们今天要讲述的重点，因为它并不是编写响应式JavaScript代码的最有选择，理由我们可以举出一大堆来：不洋气啦、代码太多会导致逻辑混乱啦、他妈妈不喜欢我，因为我是程序猿，没有本地户口啦！总之在我们讲了后面一个API之后，相信你会更倾向于后面一个。
响应式JavaScript API之二 — matchMedia
window.matchMedia允许我们使用CSS3中媒体查询状态在JavaScript进行状态响应。它的用法也非常非常简单，我们来看下面的代码：
<code>var mq = window.matchMedia("(min-width: 500px)");
</code>此时，window.matchMedia返回了一个实例mq，它包含一些属性和方法，其中我们会用到的是以下几个：
1.media — 该属性返回你在设置的媒体查询语句，比如上面的mq.media会返回”(min-width: 500px)”
2.matches — 该属性返回目前对于查询状态的匹配情况，如果匹配了查询状态，返回true，反之返回false，我们一般这样使用：
<code>if(mq.matches){
//此时window的宽度大于500px
}else{
//此时window的宽度小于500px
}
</code>
3.addListener — 我们可以运用该方法监听变化，一旦变化满足查询条件，就做出相应反应。我们来看下面的代码：
<code>if(window.matchMedia){
var mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq){
if(mq.matches){
//此时window的宽度大于500px
}else{
//此时window的宽度小于500px
}
}
</code>代码非常简单明确，但是需要注意的一点是你必须在addListener之后马上运行事件处理函数WidthChange，这能确保你的代码将会在页面载入载入中或者载入前完成初始化。如果没有这行代码，如果用户不去手动改变浏览器的尺寸，即使满足了查询条件，WidthChange函数也不会自行调用。
目前，现代浏览器都支持matchMedia方法，如果你需要在旧版本的浏览器中使用matchMedia，有心的程序员已经编写出了相应的替代的代码库。
几个响应式JavaScript库
看了前面的介绍，你一定会觉得响应式JavaScript真是太实用了，那么有没有相应的库呢？答案是肯定的。关于响应式JavaScript的库非常多，其中具有非常优秀具有代表性的几个分别是SimpleStateManager、enquire.js、yepnope.js以及大名鼎鼎的Modernizr。它们在原生的matchMedia方法的基础上，添加了许多非常实用的功能，为我们编写响应式JavaScript代码提供了不少帮助。在后面的文章中我们会分别讲述这几个库的使用方法。当然，如果你有兴趣的话，完全可以编写一个自己的响应式JavaScript库，也许下一个大热的JS库就出自于你之手。