python html5 bootstrap 视频教程

德云社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 5038|回复: 0

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

[复制链接]

172

主题

258

帖子

1114

积分

版主

Rank: 7Rank: 7Rank: 7

金钱
663
金币
7
威望
0
贡献
0
发表于 2015-4-10 11:42:05 | 显示全部楼层 |阅读模式
AI人工智能 语音助理 人工翻译 教程

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/digitser

https://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中添加以下代码即可:

  1. <!--[if lt IE 9]>
  2.   <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  3. <![endif]-->
复制代码


  1. <!--[if lt IE 9]>
  2.   <script src="js/respond.min.js"></script>
  3. <![endif]-->
复制代码

Respond.js 1.4.2 原文
  1. /*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl
  2. * Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
  3. *  */

  4. !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+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(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")[0]||k,r=j.getElementsByTagName("base")[0],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[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],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[v],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[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].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[i].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[p],l.push({media:k.split("(")[0].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[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===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.cnwww.digitser.net


AI人工智能 语音助理 人工翻译 教程
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|Sitemap|小黑屋|德云社区 |网站地图  

GMT+8, 2024-3-29 07:33 , Processed in 0.028929 second(s), 30 queries .

工业和信息化部: 粤ICP备14079481号-2

技术支持 乐数软件     版权所有 © 2014-2021 德云社区    

快速回复 返回顶部 返回列表