内容简介：翻译自：https://stackoverflow.com/questions/23368046/difference-between-html5shim-css3-mediaqueries-js-and-modernizr
我是响应式设计界的新手.
我在设计中使用 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.
它们服务于三个非常独立的目的,所有这些目的都非常重要,但并非总是需要所有(如果有的话).
html5shiv是一个脚本,允许您在此答案时正确使用旧浏览器,Internet Explorer 6-9,Safari 4.x(和iPhone 3.x)和Firefox 3.x中的html5元素.
那么,这究竟意味着什么？它非常简单. html5中有许多新元素(例如<section>,<aside>,<header>和<footer>来命名一对),以及创建自己的自定义元素的功能.这意味着我们可以编写更多语义(和更清晰)的代码.所有伟大的事情,但不幸的是,旧的浏览器不会将您的CSS应用于那些不是他们附带支持的元素(<div>,<p>,<span>,normies).幸运的是 @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在不支持它们的浏览器中添加了对名为 media queries 的css功能的支持.如果您不确定这意味着什么,请查看 The Boston Globe , Mitsubishi Australia 或 techcrunch 等网站,然后调整浏览器的大小.
媒体查询允许您根据浏览器的某些属性或属性组合(宽度,高度等)有条件地应用css.它们非常强大,并且为许多现代网页设计提供动力.
现在,问题是你是否真的需要像css3-mediaqueries-js这样的东西.这曾经是流行的,但人们(包括我自己)推荐 mobile first design 变得越来越普遍.这意味着基本样式应该是一个移动网站,媒体查询添加到基础设计,而不是隐藏/删除一些东西.因此,不支持媒体查询的浏览器(css3-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);
}
(当然这是一个非常简单的例子,你可以使用没有现代化的基本后备来完成同样的事情,但它只是作为一个易于理解的例子)
它本身不会主动添加或删除任何内容,但与 yepnope 类似,您可以测试一个功能,并有条件地为该功能添加一个填充.
像这样的东西
yepnope({
test : Modernizr.mediaqueries,
nope : ['css3-mediaqueries.js']
});
将检查浏览器中是否支持mediaqueries,如果不支持,则会将css-mediaqueries-js加载到polyfill支持.
翻译自：https://stackoverflow.com/questions/23368046/difference-between-html5shim-css3-mediaqueries-js-and-modernizr
以上所述就是小编给大家介绍的《html5shim,css3-mediaqueries.js和modernizr之间的区别》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Lean Startup
Eric Ries / Crown Business / 2011-9-13 / USD 26.00
更多中文介绍：http://huing.com Most startups fail. But many of those failures are preventable. The Lean Startup is a new approach being adopted across the globe, chan ging the way companies are built and ......一起来看看 《The Lean Startup》 这本书的介绍吧!
