让IE5、6、7、8也兼容响应式网页设计

响应式网页设计(RWD)

2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。采用 RWD 设计的网站使用CSS3 Media queries,即一种对 @media 规则的扩展,以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。(摘自维基百科)

因为IE8及更低版本不兼容css3,所以如此强大且人性化的响应式网页设计在ie8及其以下浏览器下渲染出非常恐怖。

但是网友的智慧是无穷的,CSS3-mediaqueries.js的诞生让IE8及其谷歌、火狐陈久版本也可以让RWD发挥淋漓尽致。

CSS3-mediaqueries.js说IE也可以承载响应式网页设计

<!--[if lt IE 9]><script src="css3-mediaqueries.js"></script><![endif]—>

if lt ie 9 留或者不留

if lt ie 9 表示IE9以下版本才显示,因为css3-mediaqueries.js还兼容 Firefox 1+和Safari 2,使用if lt ie 9 的好处就是只有ie9以下版本加载,那么ie9和其它高版本浏览器就不再加载可以提速但是就意味着放弃firefox和safari旧版。
或许你知道,但是还是像css3-mediaqueries.js那样重声一遍把css3-mediaqueries.js放在 </body> 前面可以提升页面加载速度,所以还是别 </head>前面。

怎样获取css3-mediaqueries.js

http://code.google.com/p/css3-mediaqueries-js/(这个好像很久没更新了)
https://github.com/livingston/css3-mediaqueries-js(似乎现在很多项目都在github上维护了)

css3-mediaqueries.js注意事项

不支持@import,对于<link>还有<style>标签内的media无效。

扩展阅读:
《自适应网页设计(Responsive Web Design)》 阮一峰 http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

转载请注明转自:一极乐https://yijile.com/log/366.html


话题相关文章

话题标签

代码CSSIE兼容响应式网页设计

一极乐 为乐趣而生

《让IE5、6、7、8也兼容响应式网页设计》  发表时间:  最后更新时间:

谁来过

不知子曰邀请你对本文不足说出你的看法!

有 3 条评论

  1. 子曰去哪 子曰去哪

    文化遗产啊,不但会留在人们心中也会继续隐匿在某些角落,据说百度有做IE5.5兼容

  2. codee codee

    该退休的就得退休!

添加新评论

captcha




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口言辞


关闭

标签云

一极乐 衷心接受你的建议

TOP