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列布局的四列向三列或兩列轉換。