liangsheng 发表于 2015-4-10 11:42:05

Respond.js 1.4.2让IE6/IE7/IE8支持HTML5 CSS3响应式布局

Respond.js 1.4.2让IE6/IE7/IE8支持HTML5 CSS3响应式布局
IE6/IE7/IE8浏览器之所以不支持HTML5制作的响应式网站,是因为其不支持选择器,要实现这点需使用respond.js才能解决,也就是调用respond.js。
Respond.js是一个快速、轻量的polyfill,用于为IE6/IE7/IE8及其它不支持CSS3 Media Query的浏览器提供媒体查询所需的min-width和max-width特性,实现HTML5标准响应式网页设计(Responsive Web Design)。
Respond.js可让IE6/IE7/IE8支持CSS3 Media Query。
10 倍以上效率提升 智能站群 所见即所得 "HTML5 Bootstrap4 网页 IDE" 开发工具http://ideweb.digitser.cn/http://forum.digitser.cn/thread-2322-1-1.html
百度网盘https://pan.baidu.com/s/1i5tKlZB
软件仓库https://github.com/digitserhttps://digitser.sourceforge.io/https://pan.baidu.com/s/1TV70__Be1ta0ney1-tudFQ

Bootstrap是twitter公司推出的一套开源网页用户界面和前端交互开发框架。Bootstrap由Twitter设计师Mark Otto和Jacob Thornton合作开发,是一个纯CSS/HTML框架。Bootstrap提供了一种优雅HTML、CSS规范,Bootstrap由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News在内,都使用了该项目。
Bootstrap基于HTML5和CSS3开发,在jQuery的基础上进行了更为个性化和人性化的完善,形成了一套独有的网站风格,并兼容大部分jQuery插件。
采用Bootstrap框架开发基于HTML5和CSS3的网页,就需在head中加入Respond.js脚本引用;否则,当采用IE6/IE7/IE8浏览器访问Bootstrap框架开发的网页时,就无法支持响应式布局。这里所说的响应式布局,具体对应CSS3中@media (min-width:768px)和@media (max-width:767px)类似代码。
Respond.js越早引入越好,在IE下看到页面闪屏的概率就越低,因为最初CSS会先渲染出来;如Respond.js加载得很后,这时重新根据media query解析出来的CSS会再改变一次页面的布局,所以看起来会有闪屏现象。
Respond.js的使用非常简单,考虑到IE9是支持html5的,所以只需在页面head中添加以下代码即可:<!-->
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<!-->或
<!-->
<script src="js/respond.min.js"></script>
<!-->
Respond.js 1.4.2 原文
/*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl
* Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
**/

!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?(+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")||k,r=j.getElementsByTagName("base"),s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k,e="CSS1Compat"===j.compatMode&&d||j.body||d,f={},o=s,r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l,x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f||(f=[]),f.push(m))}for(var C in n)n.hasOwnProperty(C)&&n&&n.parentNode===q&&q.removeChild(n);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f.join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e.match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n,l.push({media:k.split("(").match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s,e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o=!0):(!/^(*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
Respond.js 1.4.2 下载地址:
Respond.js 1.4.2.rar(3.15K)

版权声明:
1、本人发布的资源或软件若非本人原创,而来自网络或其它渠道、版权非本人所有 (在此声明:与德云社区 无关);只能作为私下交流、学习、研究之用,版权归原作者、原软件公司所有。2、若本人发布的资源或软件为本人原创,在德云社区 发布后,德云社区 就自动获得了本人的许可,但本人保留所有权。3、若您在没有获得本人发布资源、软件的所有权,或未经原作者、原软件公司许可前提下,请在下载后 24 小时内自行删除相关资源或软件。若您喜欢此资源或软件,请联系原作者、原软件公司获得许可。4、本人仅仅提供一个私下交流、学习、研究的环境,将不对任何资源、软件负任何法律责任 (并在此声明:与德云社区 无关)!5、任何涉及商业盈利性目的的单位或个人,均不得使用本人发布的任何资源或软件;否则,产生的一切后果由使用者自己承担!
6、本站存档解压密码为 www.digitser.cn 或 www.digitser.net
页: [1]
查看完整版本: Respond.js 1.4.2让IE6/IE7/IE8支持HTML5 CSS3响应式布局