响应式布局之html5shiv.js/Respond.js

最新推荐文章于 2024-08-13 08:09:23 发布

长草的年糕

最新推荐文章于 2024-08-13 08:09:23 发布

阅读量2.6k

点赞数 1

分类专栏： html5 文章标签： html5 css ie 6 响应式

本文链接：https://blog.csdn.net/F2Eeasonwong/article/details/53212971

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

响应式布局之 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>