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列布局的四列向三列或两列转换。

Responsive响应式设计

标签：

原文地址：http://www.cnblogs.com/hubl/p/5798530.html