README

安装

Composer

composer require gaomingcode/respond

原始ReadMe

一个快速且轻量级的CSS3 Media Queries的polyfill（适用于IE 6-8及更高版本）

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

此脚本的目的是提供一个快速且轻量级（3kb最小化/1kb压缩）的脚本，以在不支持CSS3 Media Queries的浏览器中启用响应式网页设计——特别是，IE 8及以下版本。它以这种方式编写，可能还会修复对其他不支持浏览器的支持（相关信息即将发布）。

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

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

使用说明

使用min/max-width媒体查询来编写CSS，以适应从移动端（首先）到桌面端的全局布局

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

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

CDN/X-Domain设置

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

支持与限制

一些需要注意的注意事项

此脚本的重点故意非常狭窄：仅对min-width和max-width媒体查询以及所有媒体类型（屏幕、打印等）进行翻译以支持非支持浏览器。我想为了文件大小、维护和性能保持简单，所以我有意识地限制了支持到构建（移动优先）响应式设计所必需的查询。将来，我可能对某些事情进行一些修改，以包括用于修复附加媒体查询功能的钩子——敬请期待！
本脚本将不支持CSS3 Media Queries的原生浏览器尽快排除。在测试支持时，所有其他浏览器都将接受快速测试以确定它们是否支持媒体查询，然后再运行脚本。此测试现在已单独包含在顶部，并使用此处的window.matchMedia polyfill： https://github.com/paulirish/matchMedia.js 。如果您已经通过Modernizr或其他方式包含了此polyfill，请随时删除该部分。
此脚本不依赖于任何其他脚本或框架（除包含的matchMedia polyfill外），并针对移动端交付进行了优化（总文件大小约1kb最小化/gzip）
正如你可能猜到的，这个实现对于CSS解析规则来说相当简单。这是好事，因为它可以运行得非常快，但其宽松性也可能导致意外行为。例如：如果你在注释中包围整个媒体查询的意图是禁用其规则，你可能会发现这些规则最终会在不支持媒体查询的浏览器中启用。
Respond.js不会解析通过@import引用的CSS，也不会与style元素内的媒体查询一起工作，因为这些样式无法重新请求进行解析。
由于安全限制，一些浏览器可能不允许此脚本在file:// urls上工作（因为它使用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的一个错误——见https://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中，并根据它们的min/max宽度与浏览器宽度的比较来启用和禁用这些style元素（即追加和从DOM中删除）。style元素上的媒体属性将匹配CSS中的查询，因此可以是“screen”、“projector”或任何你想要的。CSS中包含的任何相对路径都将以前缀href的样式表，因此图像路径将指向其正确的位置

API选项？

当然，有几个。

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

此脚本的替代方案

这并非唯一的CSS3媒体查询polyfill脚本，但可能也是最快速的。

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

gaomingcode / respond

维护者

详细信息