Responsive响应式设计

在IE6-8中彻底是不支持CSS3 Media Queries的。那么为了让IE6-8支持，咱们就颇有必要的在IE9如下的浏览器中加上media-queries.js或者respond.js脚本：

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

@media screen and (max-width:980px){ #pagewrap { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } } 

一般咱们进行列布局，都须要在第一列添加一个类名“first”，在最后一列添加一个类名“last”，主要用来清除他们之间的margin，（有关这方面的介绍能够详细阅读为之写的《CSS解决方案》中的《项目列表解决方安》，这里详细介绍了相似于列布局的相关方法，或者点击这里了解如何避免重复列末尾的Margin。）并且还经过添加类名“clearfix”来清除浮动。这些都是比较古老的解决方案了，今天咱们一块儿来看一个新方案，就是使用CSS3的伪元素选择器“nth-of-type”来实现一个简单的Responsive列布局效果。Nick La使用这种方法制做了一些WordPress主题模板。制做这些模板中，他没有使用“first”和“last”类名就实现了多列在不一样设备下都能自适应，换句话说，他就是能实现四列、三列、两列等等之间的切换。

使用nth-of-type

既然添加类名的方法作不到，咱们就须要去思考别的方案，所幸的是，CSS3提供了一个先进的选择器“nth-of-type”，咱们可使用":nth-of-type(An+B)"表达来代替“first”和“last”类名清除相对应的margin值。例如：

1.  .grid4.col:nth-of-type(4n+1)=四列布局中的第一个（至关于first类名），也就是说等于在“1,5,9”列上添加类名“first”
2.  .grid3.col:nth-of-type(3n+1)=三列布局中的第一个（至关于first类名），也就是说等于“1,4,7”列上添加类名“first”
3.  .grid2.col:nth-of-type(2n+1)=两列布局中的第一个（至关于first类名），也就是说等于“1,3,5”列上添加类名“first”

.grid4 .col:nth-of-type(4n+1), .grid3 .col:nth-of-type(3n+1), .grid2 .col:nth-of-type(2n+1) { margin-left: 0; clear: left; }

IE的兼容性

Media Queries和“nth-of-type”都不支持IE8以及其如下版本。你可使用selectivizr.js脚原本提供nth-of-type在IE下的兼容问题和使用respond.js来作Media Queries在IE下的兼容。不过遗憾的是这两个脚本不能很好的在一块儿运行（好比说，nth-of-type没法在Media Queries内运行）。也就是说在IE底下没法实现Responsive列布局的四列向三列或两列转换。