响应式布局之html5shiv.js/Respond.js
冯嘉珍
响应式布局之 html5shiv.js / Respond.js
以下为内容整理自 前端开发博客
html5shiv.js:
用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有下面两个：
为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，这样的维护成本比较高，也失去响应式设计的意义。
使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）。
原理：利用脚本document.createElement(“”)创建对应的脚本，CSS选择器便可正确应用到该标签。
官方地址：http://code.google.com/p/html5shiv/GitHub
项目地址：https://github.com/aFarkas/html5shiv
详细分解实现思路 : http://caibaojian.com/html5shiv.html
Respond.js
让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）
官方demo地址：http://scottjehl.github.com/Respond/test/test.html
详细分解实现思路 : http://caibaojian.com/respondjs.html
代码段: 引用bootstrap
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
类似资料：