css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题

respond.js插件实现原理

接下来,需要理解respond.js的实现思路:

第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中;

第二步,遍历数组,并一个个发送AJAX请求;

第三步,AJAX回调后,分析response中的media query的min-width和max-width语法(注意,仅仅支持min-width和max-width),分析出viewport变化区间对应相应的css块;

第四步,页面初始化时和window.resize时,根据当前viewport使用相应的css块。

核心结论

那么此时,就可以根据基本的实现思路,得到一些书写代码时要注意的地方:

1、需要启动本地服务器(localhost),不能使用普通本地的url地址(file://开头);

2、需要外部引入CSS文件,将CSS样式书写在style中是无效的;

3、由于respond插件是查找CSS文件,再进行处理,所以respond文件一定要放置在CSS文件的后面

4、另外,虽然把respond放置在head里还是在body后面都能够实现,但是建议放置在head中(具体原因在下面的文档提示中有提到)

5、最好不要为CSS设置utf-8的编码,使用默认(原因详见下面的文档提示部分)

文档提示

在官方文档当中的一些提示:

1、越早的引入respond.js文件,也就越可能避免IE下出现的闪屏。

2、不支持嵌套的媒体查询

3、utf-8的字符编码对respond.js文件的运行有影响

官方API原文:if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.

基本含义就是:utf-8格式的CSS文件字符编码会对插件造成影响。

但是在我使用IE6-8进行测试的时候,都能够正常显示(无论是在css文件中增加charset设置还是在link标签中增加charset设置)。因此,并不是太清楚这个位置bug的含义。

4、跨域可能会出现闪屏(还没有测试,具体情况不详)

时间: 2024-11-05 06:58:30

css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题的相关文章

HTML5 respond.js 解决IE6~8的响应式布局问题

响应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑. 那么如何在IE6~8浏览器中兼容响应式布局呢?这里我们需要借助这样一个文件:respond.js.文件下载地址:https://github.com/scottjehl/Respond. 友情提示各位朋友,关于respond.js的使用,有一些需要注意的地方,一旦不注意,在IE6-8中就无法显示出来. 一

解决媒体查询的响应式布局

众所周知,网页前端开发时兼容IE一直是很头疼的问题.今天接到一个需要响应式布局的问题,主要还要兼容IE8,9.在网上搜索了以下解决方案,现记录如下. 首先,加入代码 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> 以解决IE8及以下

html5+css3+jquery完成响应式布局

响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们去hack,现在是终端问题,让我展现出不同的设备不同的样式,折腾来折腾去,终于我们走进了热火朝天的响应式布局,自适应只能算是响应式布局的一个子集吧,对于流体个栅格后面会再次提到,有兴趣可以关注. 首先讲讲实现原理吧,css3的媒体查询功能的确帮了我们很大一个忙,@media query,它的出现也带

响应式布局(二)—— CSS3 Media Query

响应式布局有三种实现方式: CSS3 Media Query 原生 JS 代码 第三方开源框架(最常见的有 bootstrap) CSS3 -- Media Query 1. 媒体查询实现方式 方式一:styleSheet样式表中的写法: 如:<style>标签中使用@media <style> @media screen and (min-width: 480px) { body{background: blue;} } </style> 方式二:<link&g

CSS3+Js制作的一款响应式导航条

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 1 2 3 4 5 6 7 8 9

响应式布局之CSS3 media query

media query即媒体查询,是响应式布局不可获缺的一部分. CSS3中的media query增加了更多的媒体查询,这样在CSS3中我们可以在不改变页面表达内容的情况下,添加各种表达式来设置不同类型的媒体条件,来调整页面布局来适应各种不同设备. media query有两种设置方式: 1.直接在link中判断设备尺寸,引用不同的css来渲染当前页面. <link rel='stylesheet' media ='screen and (max-width:640px)' href = 's

解决响应式布局下兼容性的问题

响应式布局主要是为了在各种终端中能正常显示界面,主要是面向的手机.平板等用户的网站比较多采用,而面向PC端的网站很少使用,因为主流的显示器都比较大了,而且大多数网站都采用1000宽度,针对手机端等往往又会另外开发一套前端.因为响应式布局兼容性并不好,在IE8以下的浏览器中无法实现效果.大家宁愿采用1000PX以下宽度的页面. 下面我提供一个办法解决这个问题. 公司最近新的项目中采用了宽屏1200PX的设计,这样就产生了一个问题,在1024*768的显示器上无法正常显示. 所以我额外的写了调整的样

css3媒体查询实现网站响应式布局

响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词.因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给人不同的使用感受和体验呢?这样既节约制造成本,又节省空间,还能体验创意性的生活. 先来给大家欣赏几张图大黄蜂: 沙发床: 没错!大黄蜂为应对紧急战斗而瞬间由汽车变为战斗机,沙发床.沙发座椅是我们见过再平常不过的家具了.我们总是惊叹外国人为什么有这么丰富的想象力和神奇的创造力.而是什么驱动他们去想象进而

html5/css3响应式布局介绍及设计流程

html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页,当你用不同的终端来查