在响应式（或自适应）设计中要用到Media Queries这个CSS属性，但在某些时候我们需要对Media Queries进行动态操作，这时候可以使用Javascript。
如以下Media Queries的代码：
@media all and (max-width: 700px) { body { background: #FF0; } }
我们可以使用javascript的window.matchMedia函数来操作Media
Queries，该函数现在可以被大部分浏览器（包含IE9以上的版本）支持。
var mq = window.matchMedia(‘@media all and (max-width: 700px)‘); if(mq.matches) { // the width of browser is more then 700px } else { // the width of browser is less then 700px }
mq.addListener(function(changed) { if(changed.matches) { // the width of browser is more then 700px } else { // the width of browser is less then 700px } });
参考： Using Media Queries in JavaScript