Respond

响应.js

用于最小/最大宽度 CSS3 媒体查询的快速轻量级填充（适用于 IE 6-8 及更多）

• 版权所有 2011：Scott Jehl，scottjehl.com

• 根据 MIT 许可证获得许可。

该脚本的目标是提供一个快速且轻量级（3kb 缩小/1kb gzip 压缩）的脚本，以便在不支持 CSS3 媒体查询的浏览器（特别是 Internet Explorer 8 及更低版本）中启用响应式 Web 设计。它的编写方式可能会修补对其他不支持的浏览器的支持（很快就会有更多信息）。

如果您不熟悉响应式网页设计的概念，您可以阅读此处和此处

演示页面（颜色发生变化以显示媒体查询正在运行）

使用说明

1. 使用最小/最大宽度媒体查询制作 CSS，以适应从移动设备（首先）一直到桌面的布局

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

2. 在所有CSS之后引用respond.min.js脚本（1kb min/gzipped）（它运行得越早，IE用户看不到非媒体内容的闪光的机会就越大）

3. 打开 Internet Explorer 并高兴地挥舞拳头

CDN/X 域设置

Respond.js 的工作原理是通过 AJAX 请求 CSS 的原始副本，因此，如果您将样式表托管在 CDN（或子域）上，则需要设置本地代理来为旧版 IE 浏览器请求 CSS。以前的版本建议使用已弃用的 x 域方法，但本地代理（出于性能和安全原因）比尝试解决跨域限制更可取。

支持与注意事项

需要记住的一些注意事项：

• 该脚本的焦点故意非常狭窄：只有最小宽度和最大宽度媒体查询以及所有媒体类型（屏幕、打印等）都被转换为不支持的浏览器。我希望在文件大小、维护和性能方面保持简单，因此我有意限制对构建（移动优先）响应式设计所必需的查询的支持。将来，我可能会稍微修改一下，添加一个用于修补其他媒体查询功能的钩子 - 请继续关注！

• 本机支持 CSS3 媒体查询的浏览器会尽快选择不运行此脚本。在测试支持时，所有其他浏览器都会经过快速测试，以确定它们是否支持媒体查询，然后再继续运行脚本。该测试现在单独包含在顶部，并使用此处找到的 window.matchMedia polyfill：https://github.com/paulirish/matchMedia.js。如果您已经通过 Modernizr 或其他方式包含此填充，请随意删除该部分。

• 该脚本不依赖于其他脚本或框架（除了包含的 matchMedia polyfill 之外），并且针对移动交付进行了优化（总文件大小 min/gzip 约为 1kb）

• 正如您可能猜到的，这个实现在 CSS 解析规则方面相当愚蠢。这是一件好事，因为这使得它运行得非常快，但它的松散也可能会导致意外的行为。例如：如果您将整个媒体查询包含在打算禁用其规则的注释中，您可能会发现这些规则最终会在不支持媒体查询的浏览器中启用。

• Respond.js 不会解析通过 @import 引用的 CSS，也无法处理样式元素内的媒体查询，因为无法重新请求解析这些样式。

• 由于安全限制，某些浏览器可能不允许此脚本在 file:// url 上运行（因为它使用 xmlHttpRequest）。在网络服务器上运行它。

• 如果对包含 MQ 特定样式的 CSS 文件的请求位于重定向后面，则 Respond.js 将默默失败。 CSS 文件应以 200 状态响应。

• 目前，支持链接元素上的媒体属性，但前提是链接的样式表不包含媒体查询。如果它确实包含查询，则媒体属性将被忽略，内部查询将被正常解析。换句话说，CSS 中的 @media 语句优先。

• 据报道，如果 CSS 文件使用字节顺序标记 (BOM) 以 UTF-8 编码，则它们将无法在 IE7 或 IE8 中与 Respond.js 配合使用。在第 97 期中指出

• 警告：在媒体查询中包含 @font-face 规则将导致 IE7 和 IE8 在加载期间挂起。要解决此问题，请将 @font-face 规则公开放置，作为其他媒体查询的兄弟。

• 如果引用的样式表超过 32 个，IE 将抛出错误Invalid procedure call or argument 。连接您的 CSS，问题就会消失。

• 不支持 Sass/SCSS 源映射； @media -sass-debug-info将破坏respond.js。在第 148 期中指出

• Internet Explorer 9 支持 css3 媒体查询，但当包含媒体查询的 CSS 位于外部文件中时，不支持在框架内（这似乎是 IE9 中的错误 - 请参阅 https://stackoverflow.com/questions/10316247/media-queries -在 ie9-iframe 内失败）。如果您遇到此问题，请参阅此提交以获取修复。 https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603

• 不支持嵌套媒体查询

怎么样？

基本上，该脚本循环访问页面中引用的 CSS，并对其内容运行一两个正则表达式，以查找媒体查询及其关联的 CSS 块。在 Internet Explorer 中，样式表的内容无法在其预解析状态下检索（在 IE 8 中，这意味着其媒体查询已从文本中删除），因此 Respond.js 使用 Ajax 重新请求 CSS 文件，从那里解析文本响应。请务必正确配置 CSS 文件的缓存，以便此重新请求实际上不会发送到服务器，而是访问浏览器缓存。

从那里开始，每个媒体查询块都通过样式元素按顺序附加到头部，并且根据它们的最小/最大宽度与浏览器宽度的比较来启用和禁用这些样式元素（读取：从 DOM 附加和删除）。样式元素上的媒体属性将与 CSS 中的查询相匹配，因此它可以是“屏幕”、“投影仪”或您想要的任何内容。 CSS 中包含的任何相对路径都将以其样式表的 href 为前缀，因此图像路径将定向到其正确的目的地

API 选项？

当然，有一对：

• respond.update() ：重新运行解析器（如果您向页面添加了样式表并且需要翻译它，则很有帮助）
• respond.mediaQueriesSupported：如果浏览器本身支持媒体查询，则设置为 true。
• respond.getEmValue() ：返回 1 em 的像素值

此脚本的替代方案

这不是唯一的 CSS3 媒体查询 polyfill 脚本；但它可能是最快的。

如果您正在寻找更强大的 CSS3 媒体查询支持，您可以查看 https://code.google.com/p/css3-mediaqueries-js/。在测试中，我发现该脚本在渲染复杂的响应式设计（文件大小和性能方面）时明显缓慢，但它确实支持比该脚本更多的媒体查询功能。向作者致敬！ :)