CSS 和 Javascript 媒体查询检测

Question

从http://www.w3.org/TR/css3-mediaqueries/可以看出，媒体查询的声明方式有很多种，例如：

(1)@media screen and (min-width: 400px) and (max-width: 700px) { … }

(2)@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

(3)@media screen and (device-aspect-ratio: 16/9) { … }

(4)@media screen and (device-width: 800px) { … }

等等。

我想知道在 javascript 或浏览器中是否有任何方法可以找到某些媒体查询适用的宽度范围。

例如 (1) 将介于 400 和 700 之间，而 (4) 将恰好是 800

解析媒体查询字符串以确定此信息似乎很乏味。有没有更简单的方法？

Answer 1

试试这个 mediaquery 小书签：http://fhemberger.github.com/mediaquery-bookmarklet/