顽固守旧者的福音:用 CSS3 MediaQueries JS 和 CSS3 做跨浏览器弹性布局

为什么

本文诠释一种纯 CSS3 + 现成 javaScript 的兼容旧浏览器的弹性布局的制作方法。 做弹性布局时,为了兼容性(IE6、IE7、IE8),一般都是用 JavaScript 绑定 window.onresize 。这样虽然行得通,却有点浪费支持 CSS3 的先进浏览器。 而引入 CSS3 MediaQueries JS ,就能使低级浏览器完美支持 css3 的 media query 。一套代码,处处可用,把兼容性问题都丢给轮子去解决吧! CSS3 MediaQueries JS 开发于 2008 年。支持 IE 5+, Firefox 1+ and Safari 2 。IE9+, Firefox 3.5+, Opera 7+, Safari 3+ 和 Chrome 已经原生支持 media query 了。

使用方法

在 body 之前插入如下代码,条件性判断应该也可以省略不要:

<!–[if lt IE 9]><![endif]—>

注意事项

  1. 不支持 @import ;