7

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

我在我的设计中使用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。

4

2 回答 2

18

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

html5shiv 又名 html5shim

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

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

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

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

css3-mediaqueries-js

css3-mediaqueries-js在不支持它们的浏览器中添加了对称为媒体查询的 css 功能的支持。如果您不确定这意味着什么，请查看波士顿环球报、Mitsubishi Australia或techcrunch等网站，然后调整浏览器大小。

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

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

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

现代化

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 以填充对它的支持。

于 2014-04-29T18:00:51.903 回答
0

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

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

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

最佳用法是使用 -selectivizr和html5shiv

于 2015-11-16T17:02:51.327 回答