响应式网页设计(RWD)
2010年,Ethan Marcotte提出了”自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。采用 RWD 设计的网站使用CSS3 Media queries,即一种对 @media 规则的扩展,以及流式的基于比例的网格和自适应大小的图像以适应不同大小的设备。(摘自维基百科)
因为IE8及更低版本不兼容css3,所以如此强大且人性化的响应式网页设计在ie8及其以下浏览器下渲染出非常恐怖。
但是网友的智慧是无穷的,CSS3-mediaqueries.js的诞生让IE8及其谷歌、火狐陈久版本也可以让RWD发挥淋漓尽致。
CSS3-mediaqueries.js说IE也可以承载响应式网页设计
1 | <!--[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
Relay Tips: 一极乐( https://yijile.com/log/366/ )