【问题标题】：Difference between html5shim, css3-mediaqueries.js and modernizrhtml5shim、css3-mediaqueries.js 和modernizr 之间的区别
【发布时间】：2014-06-15 14:10:42
【问题描述】：

我是响应式设计领域的新手。

我在我的设计中使用http://www.responsivegridsystem.com/。它告诉添加以下标记

<!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->    
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements and feature detects -->
<script src="vendors/responsive/js/modernizr-2.5.3-min.js"></script>

由于媒体查询在 IE8 中不起作用，根据这个问题 IE7, IE8 support for css3 media query 我也在使用以下标记

<!--[if lt IE 9]>
    <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

所有这些都需要吗？ html5shim、modernizr 和 css3mediaqueiries 有什么区别？

我需要使用modernizr 吗？因为我没有在我的 js 文件中做任何事情，比如 jQuery。

【问题讨论】：

对于扩展和完整的答案，您只需查看您引用的项目的页面
@FabrizioCalderan ：我用谷歌搜索并阅读了很多内容。但其中许多超出了我的理解范围。我正在寻找关于这些的简单解释

标签： css responsive-design media-queries modernizr html5shiv

【解决方案1】：

它们服务于三个非常不同的目的，都可能非常重要，但并非总是需要所有（如果有的话）。

html5shiv aka html5shim

html5shiv 是一个脚本，允许您在本回答时在旧浏览器、Internet Explorer 6-9、Safari 4.x（和 iPhone 3.x）和 Firefox 3.x 中正确使用 html5 元素。

那么，这实际上意味着什么？它很简单。 html5 中有许多新元素（如<section>、<aside>、<header> 和<footer> 等等），以及创建您自己的自定义元素的能力。这意味着我们可以编写更多语义（和更清晰）的代码。所有伟大的事情，但不幸的是，旧版浏览器不会将您的 css 应用于不属于他们支持的元素之一（<div>，<p>，<span>，规范）。幸运的是 @sjoerd-visscher dropped some knowledge 并挽救了这一天。他发现，如果您使用document.createElement 创建任何新元素，它就会将其注册为受支持的元素之一，并且 css 可以正常工作！这意味着您实际上可以在生产中使用 html5 元素。这在当时是一笔巨大的交易，幸运的是，随着那些旧浏览器的消亡，它变得越来越不重要。

它已经扩展为添加一些基本的浏览器样式，除了注册元素。

如果您不必支持 Internet Explorer 6-9、Safari 4.x（和 iPhone 3.x）或 Firefox 3.x，那么您不要需要使用html5shiv。

css3-mediaqueries-js

css3-mediaqueries-js 在不支持它们的浏览器中添加了对名为 media queries 的 css 功能的支持。如果您不确定这意味着什么，请查看The Boston Globe、Mitsubishi Australia 或techcrunch 等网站，然后调整浏览器大小。

媒体查询允许您根据浏览器的某些属性或属性组合（宽度、高度等）有条件地应用 css。它们非常强大，为许多现代网页设计提供动力。

现在，问题是您是否真的需要像 css3-mediaqueries-js 这样的东西。这样做曾经很流行，但人们（包括我自己）推荐mobile first design 变得越来越普遍。这意味着基本样式应该是一个移动网站，媒体查询添加到基本设计，而不是隐藏/删除一些东西。因此，不支持媒体查询的浏览器（css3-mediaqueries-js 所针对的那些）获得了“移动”设计服务，而不是在每次调整大小时填充然后应用媒体查询。较旧的浏览器通常意味着较旧、较慢和较小的计算机。他们不仅缺乏对媒体查询的支持，而且他们的 javascript 引擎比支持当前 Chrome、Firefox 和 IE 的现代引擎慢数百（有时数千）倍。在功能不那么强大的东西上的所有额外工作很容易导致这些旧浏览器的用户体验下降。

你是否应该使用它最终取决于你，但一定要问自己什么对用户最有利，不一定是设计师：]

Modernizr

Modernizr 是一个功能检测库，可让您以简单的方式检查新的 Web 功能。默认情况下，（（您可以在此处构建自定义版本）[http://modernizr.com/download/]，更改您想要的任何内容）它会在页面上添加 <html> 元素的类，从而根据其结果修改设计非常容易。

.css-gradients .background {
  background: linear-gradient(to bottom, black 0%, white 100%);
}
.no-css-gradients .background {
  background: url(gradient.jpg);
}

（当然这是一个非常简单的例子，你可以使用没有modernizr的基本后备来完成同样的事情，但这只是一个易于理解的例子）

它本身不会主动添加或删除任何东西，但结合yepnope 之类的东西，您可以测试一个功能，并有条件地为该功能添加一个polyfill。

类似的东西

yepnope({
  test : Modernizr.mediaqueries,
  nope : ['css3-mediaqueries.js']
});

会检查浏览器是否支持媒体查询，如果不支持，它会加载 css-mediaqueries-js 以填充对它的支持。

【讨论】：

这正是我想要的。这么简单的解释。

【解决方案2】：

HTML5shiv 用于在 ie8 中模拟 html5 元素。

css3-mediaqueries-js 和 respond js 做类似的任务（支持媒体查询）

Modernizr实际上是一个浏览器功能测试器，它在ie中包含一堆css类，然后为ie应用手动样式。

最好的用法是使用- selectivizr 与 html5shiv

【讨论】：