响应式布局之html5shiv.jsRespond.js

    xiaoxiao2021-11-13  62

    响应式布局之 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>
    转载请注明原文地址: https://ju.6miu.com/read-678246.html

    最新回复(0)