【发布时间】：2011-12-08 07:02:25
【问题描述】：
我正在研究使用modernizr 来支持ie8 中的媒体查询。 您能否提供一个实现相同的示例。
我还查看了 Respond.js，但发现它包含所有 CDN 内容有点复杂。
任何其他建议也将不胜感激。
【问题讨论】：
标签： html css media-queries
【发布时间】：2011-12-08 07:02:25
【问题描述】：
【讨论】：
-
谢谢很多..我只是看看。 Semms 正是我正在寻找的东西..Adapt.js..如果我理解正确，我只需要在我需要显示 2 个差异版本/2 个 css（desktop.css/ipad.css）的所有页面上包含 ths js并且还添加代码 var ADAPT_CONFIG = {... }所以如果即使在 ie8 上也可以显示 2 个不同的版本@不同的屏幕尺寸，我不需要 Respond.js ...请确认..
-
我也可以用 adapt.js 代替完整的媒体查询语句..e.g.如果我有 3 个 CSS 文件要应用于相同的 html @ diff 屏幕尺寸，即使浏览器理解媒体查询，比如 FF4 或 Safari 5 ，它也可以与 adapt.js 无缝工作......我不太明白在adapter.js中使用回调函数..
-
你应该给文档一个look 这很简单。当然，您应该在任何地方都使用最低 ADAPT_CONFIG 包含脚本。使用它的最佳方法是使用条件语句仅加载 IE 版本低于 9 的脚本。然后您仍然可以对更现代的浏览器使用媒体查询。关于回退，它是可选的，它的作用是在 adapt.js 完成工作后执行引用的 javascript 函数。试着把这个声明：
function() {alert('Adapt Loaded');}有后备。享受;) -
一夜之间我认为使用modernizr 测试媒体查询比使用条件cmets 检测是否必须使用adapt.js 更好100%。与 modernizr 一起测试媒体查询浏览器功能！
-
modernizr 也增加了对 html5 元素（如文章、部分等）的支持。
Modernizr 不向浏览器添加功能；它只是检测浏览器是否支持某些功能，因此允许您的网站确定是否需要为该功能使用 polyfill hack。
因此，您将使用 Modernizr 来确定是否需要使用 Respond.js。
Modernizr 网站确实包含 a page which lists all the polyfill hacks that they know of，因此如果您对 Respond.js 不满意，可以尝试查看此处以查看可用的替代方案。查看页面，我发现“媒体查询”部分列出了其他一些，因此您可以尝试一下。
但是，我会说 Respond.js 似乎确实是目前推荐用于此类事情的一个脚本。我没有尝试过列出的其他内容，因此无法比较它们，但我可以说 Respond.js 的工作方式是有充分理由的。
Respond.js 有这些复杂的跨域问题的原因是它与不理解媒体查询的浏览器一起工作的唯一方法是再次加载整个样式表并使用 Javascript 处理它。但是浏览器的安全模型不喜欢你用远程加载的脚本做那种事情。
正如我所说，我没有使用任何替代脚本，但我的猜测是它们会遇到类似的问题，因为它们需要工作方式才能使媒体查询正常工作不支持它们的浏览器。
解决此问题的最简单方法是将respond.js 脚本放入与您网站的其余部分相同的域中，而不是从单独的域中加载它。这完全绕过了处理 CDN 问题的任何需要。
希望对您有所帮助。
【讨论】：
internet explorer 8 不支持媒体查询。对于modernizr，这也不起作用。 Modernizr 不会向浏览器添加功能。为什么要在 ie8 中添加媒体查询？媒体查询适用于移动网站。媒体查询不适用于桌面浏览器。
【讨论】：
-
-1 这根本不是真的。不是每个人都在巨大的显示器上浏览。媒体查询是为了让您可以为可能在不同尺寸显示器上的人提供响应式布局，除了移动设备
-
如果您在桌面之前先为移动设备编写 CSS（例如 stuffandnonsense.co.uk/projects/320andup/），那么您希望 IE6-8 仍然能够看到桌面样式，所以它需要能够理解 CSS 媒体查询
-
一些 CSS 框架使用移动优先的方法，并要求媒体查询以不同于默认移动视图的布局显示内容。