README

这是一个用于 min/max-width CSS3 媒体查询的快速且轻量级的 polyfill（适用于 IE 6-8 及以上版本）

版权 2011: Scott Jehl, scottjehl.com
MIT 许可证下发布。

此脚本的目标是提供一个快速且轻量级的（3kb 最小化 / 1kb 压缩）脚本，以便在不支持 CSS3 媒体查询的浏览器中启用响应式网页设计 - 特别是在 Internet Explorer 8 及以下版本中。它的编写方式使其很可能修补其他不支持浏览器的支持 - 关于这一点，稍后将提供更多信息。

如果您不熟悉围绕响应式网页设计的概念，您可以在这里阅读，也可以在这里阅读

演示页面（颜色变化以显示媒体查询正在工作）

使用说明

使用 min/max-width 媒体查询来构建您的 CSS，从移动端（首先）到桌面端进行布局适配

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

在所有 CSS 之后引用 respond.min.js 脚本（1kb 最小化 / 压缩 1kb）（越早运行，IE 用户看到非媒体内容闪烁的机会就越小）
打开 Internet Explorer 并兴奋地挥拳

CDN/X-Domain 设置

Respond.js 通过 AJAX 请求您的 CSS 的原始副本，因此如果您在 CDN（或子域）上托管样式表，您需要上传一个代理页面来启用跨域通信。

请参阅 cross-domain/example.html 中的演示

将 cross-domain/respond-proxy.html 上传到您的外部域
将 cross-domain/respond.proxy.gif 上传到您的原始域
通过 <link /> 元素引用文件

	<!-- Respond.js proxy on external server -->
	<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

	<!-- Respond.js redirect location on local server -->
	<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

	<!-- Respond.js proxy script on local server -->
	<script src="/path/to/respond.proxy.js"></script>

如果您在跨域设置方面遇到问题，请确保 respond-proxy.html 后面没有附加查询字符串。

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

支持和注意事项

一些需要注意的要点

此脚本的关注点故意非常窄：仅将 min-width 和 max-width 媒体查询以及所有媒体类型（屏幕、打印等）转换为不支持浏览器的查询。我想保持文件大小、维护和性能简单，因此我故意将支持限制到构建（移动优先）响应式设计所必需的查询。将来，我可能会对事情进行一些修改，以包含用于修补附加媒体查询功能的钩子 - 请保持关注！
本机支持 CSS3 媒体查询的浏览器会尽快退出运行此脚本。在测试支持时，所有其他浏览器都将在运行脚本之前进行快速测试，以确定它们是否支持媒体查询。此测试现在已单独包括在顶部，并使用在这里找到的 window.matchMedia polyfill：https://github.com/paulirish/matchMedia.js 。如果您已经通过 Modernizr 或其他方式包括此 polyfill，请随时删除该部分。
本脚本不依赖于任何其他脚本或框架（除了包含的matchMedia polyfill），并且针对移动设备传输进行了优化（总文件大小约1kb，经过gzip压缩）。
正如你可能猜到的，这个实现关于CSS解析规则相当简单。这实际上是个好事，因为它可以运行得非常快，但其宽松性也可能导致意外行为。例如：如果你在注释中包围整个媒体查询，意图禁用其规则，你可能会发现这些规则在不支持媒体查询的浏览器中实际上被启用了。
Respond.js不解析通过@import引用的CSS，也不支持在style元素内的媒体查询，因为这些样式不能重新请求以进行解析。
由于安全限制，一些浏览器可能不允许此脚本在file:// url上工作（因为它使用xmlHttpRequest）。请在Web服务器上运行它。
如果包含MQ特定样式的CSS文件的请求位于重定向之后，Respond.js将静默失败。CSS文件应返回200状态。
目前，支持link元素上的媒体属性，但前提是链接的样式表中不包含媒体查询。如果包含查询，则忽略媒体属性，并正常解析内部查询。换句话说，CSS中的@media语句具有优先级。
据称，如果CSS文件以UTF-8编码且包含字节顺序标记（BOM），则它们在IE7或IE8中将无法与Respond.js一起工作。已在问题#97中记录。
警告：将@font-face规则放在媒体查询内会导致IE7和IE8在加载时挂起。为了解决这个问题，将@font-face规则放在宽敞的位置，作为其他媒体查询的兄弟元素。
如果你引用了超过32个样式表，IE将抛出一个错误，“无效的过程调用或参数”。将CSS合并在一起，问题应该就会消失。
Sass/SCSS源映射不受支持；@media -sass-debug-info将破坏respond.js。已在问题#148中记录。
Internet Explorer 9支持CSS3媒体查询，但不支持在CSS包含媒体查询的外部文件中的框架内（这似乎是IE9的一个错误——见http://stackoverflow.com/questions/10316247/media-queries-fail-inside-ie9-iframe）。如果你遇到这个问题，请查看此提交以获取修复方法。https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603
嵌套媒体查询不受支持。

它是如何工作的？

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

然后，每个媒体查询块按顺序通过style元素追加到head中，并且根据它们的最小/最大宽度与浏览器宽度的比较来启用和禁用（即追加和从DOM中删除）这些style元素。style元素上的媒体属性将匹配CSS中的查询，所以它可以是“screen”，“projector”或任何你想要的。CSS中包含的任何相对路径都将由其样式表的href前缀，所以图像路径将指向正确的目的地。

API选项？

当然，有几个。

respond.update()：重新运行解析器（如果你向页面添加了样式表并需要翻译，这很有用）
respond.mediaQueriesSupported：如果浏览器原生支持媒体查询，则设置为true。
respond.getEmValue()：返回一个em的像素值

此脚本的替代方案

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

如果你需要更强大的CSS3媒体查询支持，你可能想看看http://code.google.com/p/css3-mediaqueries-js/。在测试中，我发现当渲染复杂的响应式设计时（无论是文件大小还是性能），该脚本明显较慢，但它确实支持比这个脚本更多的媒体查询功能。向作者表示衷心的感谢！：）

rogeriopradoj / respond

维护者

详细信息