Mic*_*Mic 7 css3 media-queries modernizr responsive-design html5shiv
我是响应式设计界的新手.
我在我的设计中使用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支持css3媒体查询我也使用以下标记
<!--[if lt IE 9]>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
这些都需要吗？什么是html5shim,modernizr和css3mediaqueiries之间的区别？
我需要使用modernizr吗？因为我在js文件中没有做任何事情,比如jQuery.
Pat*_*ick 18
它们服务于三个非常独立的目的,所有这些目的都非常重要,但并非总是需要所有(如果有的话).
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 放弃了一些知识并挽救了这一天.他发现,如果你使用document.createElement创建任何新元素,它会将其注册为受支持的元素之一,并且css可以正常工作!这意味着您实际上可以在生产中使用 html5元素.当时这是一个巨大的交易,幸运的是,随着那些旧版浏览器的消亡,它变得越来越不重要.
除了注册元素之外,它已经扩展为为浏览器添加一些基本样式.
如果您没有支持Internet Explorer 6-9,Safari浏览器4.x版(和iPhone 3.x中),或Firefox 3.x的,那么你就不要需要使用html5shiv.
css3-mediaqueries-js 在不支持它们的浏览器中添加了对称为媒体查询的css功能的支持.如果您不确定这意味着什么,请查看The Boston Globe,Mitsubishi Australia或techcrunch等网站,然后调整浏览器的大小.
媒体查询允许您根据浏览器的某些属性或属性组合(宽度,高度等)有条件地应用css.它们非常强大,并且为许多现代网页设计提供动力.
现在,问题是你是否真的需要像css3-mediaqueries-js这样的东西.这曾经是流行的,但是人们(包括我自己)推荐移动优先设计变得越来越普遍.这意味着基本样式应该是移动站点,媒体查询添加到基本设计,而不是隐藏/删除一些东西.因此,不支持媒体查询的浏览器(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之类的内容组合,您可以测试一个功能,并有条件地为该功能添加一个polyfill.
像这样的东西
yepnope({
test : Modernizr.mediaqueries,
nope : ['css3-mediaqueries.js']
});
将检查浏览器中是否支持mediaqueries,如果不支持,则会将css-mediaqueries-js加载到polyfill支持.