python html5 bootstrap 视频教程
德云社区 门户 IT 编程 编程语言 XML/HTML 查看内容

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

2015-4-10 12:38| 发布者: digitser| 查看: 8907| 评论: 0|原作者: liangsheng

摘要: Respond.js 1.4.2让IE6/IE7/IE8支持HTML5 CSS3响应式布局 IE6/IE7/IE8浏览器之所以不支持HTML5制作的响应式网站,是因为其不支持选择器,要实现这点需使用respond.js才能解决,也就是调用respond.js。 Respond.js是 ...
自动立式分页纸箱赋码系统 ── 全自动 专业 立式分页 瓦楞纸 水性油墨 贴标 喷码 检测系统

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

<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->


<!--[if lt IE 9]>
  <script src="js/respond.min.js"></script>
<![endif]-->

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+)?([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.cn 或 www.digitser.net


路过

雷人

握手

鲜花

鸡蛋
AI人工智能 语音助理 人工翻译 教程

相关阅读

最新评论

相关分类

CSS3 官方中文文档编制 手册教程 人工翻译 更新日志
CSS3 官方中文文档编制 手册教程 人工翻译 更新日志 CSS3 中文文档编制采用机器辅助 + 全人工翻译,完全采用 数字翻译 的文档翻译流程进行汉化 (未采用任何第 3 方工具),[1241/2022-07-31]
CSS3 官方中文文档编制 手册教程 帮助文件 人工翻译
CSS3 官方中文文档编制 手册教程 帮助文件 人工翻译 CSS3 中文文档编制采用机器辅助 + 全人工翻译,完全采用 数字翻译 的文档翻译流程进行汉化 (未采用任何第 3 方工具),[1273/2022-07-31]
SolidWorks 2020 非对称Conic Rho圆角 抽壳出现模型穿刺
SolidWorks 2020 非对称Conic Rho圆角 抽壳出现模型穿刺 标准对称圆角最常用,但有时偶尔也会用到非对称圆角。 特别是模具、五金、电子、手饰、汽车、家具、玩具、等对圆[1075/2022-05-25]
NumPy 1.22 官方中文文档编制 手册帮助 更新日志
NumPy 1.22 官方中文文档编制 手册帮助 更新日志 以后不再上传 en-US 官方原版文档编制,目前上传的最新 zh-CN 人工翻译版本为 NumPy 1.22。 NumPy 1.22 中文文档编制采用[726/2022-05-22]
NumPy 1.22 官方中文文档编制 手册帮助 全人工翻译
NumPy 1.22 官方中文文档编制 手册帮助 全人工翻译 以后不再上传 en-US 官方原版文档编制,目前上传的最新 zh-CN 人工翻译版本为 NumPy 1.22。 NumPy 1.22 中文文档编制采[836/2022-05-22]
Pillow 9.1.1 官方中文文档编制 手册帮助 更新日志
Pillow 9.1.1 官方中文文档编制 手册帮助 更新日志 以后不再上传 en-US 官方原版文档编制,目前上传的最新 zh-CN 人工翻译版本为 Pillow 9.1.1。 Pillow 9.1.1 中文文档编[772/2022-05-22]
Pillow 9.1.1 官方中文文档编制 手册帮助 全人工翻译
Pillow 9.1.1 官方中文文档编制 手册帮助 全人工翻译 以后不再上传 en-US 官方原版文档编制,目前上传的最新 zh-CN 人工翻译版本为 Pillow 9.1.1。 Pillow 9.1.1 中文文档[716/2022-05-22]
PyMuPDF 1.19.6 官方中文文档编制 手册帮助 更新日志
PyMuPDF 1.19.6 官方中文文档编制 手册帮助 更新日志 以后不再上传 en-US 官方原版文档编制,目前上传的最新 zh-CN 人工翻译版本为 PyMuPDF 1.19.6。 PyMuPDF 1.19.6 中文[1334/2022-05-22]
PyMuPDF 1.19.6 官方中文文档编制 手册帮助 全人工翻译
PyMuPDF 1.19.6 官方中文文档编制 手册帮助 全人工翻译 以后不再上传 en-US 官方原版文档编制,目前上传的最新 zh-CN 人工翻译版本为 PyMuPDF 1.19.6。 PyMuPDF 1.19.6 中[1179/2022-05-22]
Qt 6.3.0 官方中文文档编制 手册教程 帮助文件 人工翻译
Qt 6.3.0 官方中文文档编制 手册教程 帮助文件 人工翻译 以后不再上传 en-US 官方原版文档编制,目前上传的最新 zh-CN 人工翻译版本为 Qt 6.3.0。 Qt 6.3.0 中文文档编制[2585/2022-05-02]
Qt 6.3.0 官方中文文档编制 手册教程 人工翻译更新日志
Qt 6.3.0 官方中文文档编制 手册教程 人工翻译更新日志 以后不再上传 en-US 官方原版文档编制,目前上传的最新 zh-CN 人工翻译版本为 Qt 6.3.0。 Qt 6.3.0 中文文档编制采[2201/2022-05-02]
MAGIX Music Maker Premium - 易学易用 功能强大的可视化编曲软件
MAGIX Music Maker Premium - 易学易用 功能强大的可视化编曲软件 MAGIX Music Maker 是德国 Magix 出品的可视化编曲软件,功能强大、使用简单、容易上手。 MAGIX Music Ma[1881/2022-04-11]
MQTT - 消息队列遥测技术 M2M机器到机器 IoT物联网 通信协议
MQTT - 消息队列遥测技术 M2M机器到机器 IoT物联网 通信协议 MQTT 是 Message Queuing Telemetry Transport 的缩写,中文译为消息队列遥测传输。 MQTT 是 ISO 标准 (ISO/I[749/2022-02-24]
数字 Python IDE 2022 注册机 注册码生成器 附详细破解方法
数字 Python IDE 2022 注册机 注册码生成器 附详细破解方法 数字 Python IDE 目前还在不断研发 进步中,虽不太成熟,但其新理念很有特色 特别适于多版本 多文档 多工程并行[826/2022-02-01]
数字翻译 2022 注册机 注册码生成器 内存破解器 附详细用法
数字翻译 2022 注册机 注册码生成器 内存破解器 附详细用法 数字翻译目前还在不断研发 进步中,虽不太成熟,但其新理念很有特色 特别适于 HTML 文档本地化 (面向高精度 超[785/2022-02-01]

Archiver|Sitemap|小黑屋|德云社区   

GMT+8, 2024-7-20 00:15 , Processed in 0.079622 second(s), 27 queries .

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

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

返回顶部