我正在使用Twitter Bootstrap构建响应式网站。我可以使用媒体查询和每个断点的不同CSS显示/隐藏/修改/重新排列内容。这很好。但是为每个断点触发不同的javascript呢？什么是最可靠的方法？
在这种特殊情况下，我使用的是砌体插件。我希望砌砖在小型，中型或大型设备上布置物品，但是在我不想要的超小型设备上。 （我自己的原生列表布局会没问题。）
似乎最现代的方法是使用window.matchMedia()方法。这也让我添加一个监听器，以便在窗口大小改变时添加/删除砌体。缺点是，根据Mozilla开发者网络，对matchMedia的支持并不是很好。我可以使用polyfill解决这个问题，但听起来有点复杂。
另一种方法是测试document.documentElement.clientWidth（或.screenWidth），并将我的javascript逻辑与媒体查询的断点同步。我会根据需要使用window.onresize事件来加载/卸载/重新布局。
第三种方法可能是在resize事件上运行一些javascript，测试由css和媒体查询控制的属性的值。例如，如果特定元素隐藏在超小屏幕上，我可以查看该元素的visibility属性，以确定我何时在一个额外的小屏幕上。
我倾向于这三个选项中的第二个，但我很想知道是否有一个普遍接受的＆＃39;实现这一目标的方法，以及我错过的其他选择。
答案 0 :(得分：1)
我会选择window.matchMedia，因为它支持大多数当前浏览器（http://caniuse.com/#feat=matchmedia），对于那些不支持它的人，您可以使用此polyfill：https://github.com/paulirish/matchMedia.js
使用 matchMedia 可能会降低特定视口/调整大小逻辑的复杂性，因为您可以重复使用已在css中使用的断点的定义。如果您使用的是SASS，您甚至可以定义一次断点并在SASS和JavaScript之间共享它们：http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json
如果您没有限制/去抖动，那么收听调整大小事件会变得相当昂贵/缓慢。如果您坚持调整大小事件，请查看https://github.com/louisremi/jquery-smartresize。
有一个 jsPerf 将matchMedia的性能与resize事件进行比较：https://jsperf.com/matchmedia-vs-resize/3对于我来说，matchMedia比调整大小更快（在Chrome 41和Firefox 36中测试）
答案 1 :(得分：1)
在JavaScript中查看Awesome Media Queries：enquire.js是一个轻量级的纯JavaScript库（带有无依赖关系），用于以编程方式响应媒体查询。