Respond.js

原文链接：https://github.com/scottjehl/Respond/blob/master/README.md

Respond.js

　　一个快速、轻量的关于 css3 Media Qurery 的媒体特性(min/max-width)的polyfill(什么是polyfill)(用来兼容IE6-8或更多的浏览器)

　　　· 2011版权所有：Scott jehl,scottjehl.com
　　　· MIT或GPL Version2 双重许可证

　　Respond.js是一个快速、轻量的脚本（3kb minified / 1kb gzipped），它的目标是使得那些不支持CSS3 Media Queryes特性的浏览器能够支持响应性设计，尤其是小于等于8的ie浏览器。它是用这样的方式，尽可能的修补那些不支持的浏览器来支持（很快将会有更多的信息）       

　　如果你不熟悉响应性设计的周边概念，你可以看这里和这里。

　　demo页面（通过颜色的变化来展示Media Queries的作用）

使用说明：

　　1、使用mim/max-with media queries 手写你的css，首先适应移动端的布局，然后直到桌面。

@media screen and (min-width: 480px){
        ...styles for 480px and up go here
    }

       2、引用respond.min.js脚本（1kb min/gzipped），放到所有css文件之后（它越早运行，ie用户看到非media内容的闪烁的几率越小）。

　　3、打开一个搓的浏览器浏览它并且高兴的举拳＂欧也吧＂。

内容分发网络/多域名启动（CDN/X-Domain Setup）

　　Respond.js通过AJAX请求一个你的css的原始副本，那么如果你部署你的样式文件在cdn上（或者子域名下），你需要上传一个代理页面来跨域通信。

　　看一个跨域的demo - cross-domain/example.html:

　　　上传 cross-domain/respond-proxy.html到你的外部域名上

　　　上传 cross-domain/respond.proxy.gif 到你的原始域名

　　　通过元素 来引用文件：

　　　注意：非常感谢 @doctyper 关于跨域代理的贡献！

　　　支持和注意事项（caveats）

　　一些注意事项要牢记：

　　脚本的着重点故意收窄的，仅仅对min-width 和 max-width media queries 以及所有的media types(screen,print,等等)不支持的浏览器提供支持。我只是想保持文件的简化，可维护性，执行性能。因此 我特意限制支持某些属性，这些属性对设计响应性设计（首要移动端）来说有潜在需要。将来，我可能返工一些事情来通过钩子（hook）引进其他 media query 特性--敬请期待！

　　对于原生支持css3 mqdia queries的浏览器要尽可能的选择退出执行此脚本。在测试支持中，所有其他经过快速测试的浏览器在运行此脚本之前决定他们是否支持 media query。这些测试所需文件现在都是include在页面顶部，如果使用window.matchMedia polyfill 请点击这里。如果你已经通过Modernizr或者以其他方式包含了这样的polyfill，请随时删除该部分（maybe matchMedia.js）。

　　这个脚本不依赖其他脚本或库（它内部包含了matchMedia polyfill）,并且为移动端做了优化（~1kb total filesize min/gzip）。

　　正如你所想，在考虑css 解析规则时，这个实现是想当笨的。这是个好事情，因为这让你运行的真正快起来，但是它的松散可能会一些意外的表现。例如：如果在评论里括住一个完整的 media query故意打破它的规则，你可能发现这些规则在不支持media query的浏览器里失效了。

　　Respond.js 不解析通过@import引用的css，也不解析包含在style标签内联的media queries，因为这些样式不能重新请求解析。

　　因为安全的限制，一些浏览器可能不允许这个脚本在file://ruls里起作用(因为他使用XMLHTTPRequest)。在服务器端运行它。

　　目前，写在link元素上的media属性是被支持的，但只有当链接的样式里没有包含media queries时。如果它包含queries，media属性将会被忽略，文件内部的queries将会被正常解析。换句话说，在css文件里的@media表达式具有优先权。

　　据说，如果css文件是用UTF-8有BOM(Byte-Order-Mark)编码,在加载有Respond.js的IE7、IE8浏览器里，将不起作用。

　　警告：包含@font-face规则的media query将会导致IE7和IE8在加载中挂起。为了解决这个问题，将@font-face规则放的更宽广，让它作为其他media queries的一个同辈。

它怎样工作？

　　基本上，这个脚本循环遍历所有的页面上的css引用，运行1、2个正则表达式来查找media queries和他们相关的css块。在ie浏览器里，样式的内容是不可能从它的预解析的状态（在ie8-,意味它的media queries已经从文本中移除了）取到的，因此 Respond.js 使用Ajax重新请求css文件，解析返回来的文本。确保你配置正确，缓存你的css文件，这样这些重新请求实际上没有到服务器端，而是取自浏览器的缓存里。

　　从这，每个media query 块会以次追加到head标签里，这些样式元素起不起作用（注意：追加和移除从DOM），取决于他们的min/max width与浏览器宽度的比较结果。在style元素上的media属性将会匹配在css文件里的 query，这样它就可能是"screen","projector"或者任何你想要的类型。任何在css里的相对路径将会加上他们样式的href属性的前缀，因此图片地址将会指向他们正确的目标。

API选项？

　　没错，就一对：

　　respond.update():返回解析器（如果你增加样式到页面，它需要被转换时，这很有用）

　　respond.mediaQueriesSupported：如果浏览器原生支持media queries时，设为true.

该脚本的可替代品：

　　它可能不是唯一的css3 Media query polyfill 脚本，但是它可能是最快的。

　　如果你正在寻找更健壮的css3 media query 支持，你可以签出http://code.google.com/p/css3-mediaqueries-js/ 。在测试中，我发现该脚本明显的缓慢，当渲染复杂的响应性设计时（不管是文件大小还是性能），但是它确实支持很多media query 特性比我这个脚本，给做着戴个高帽夸夸他！:)