基于媒体查询的响应式布局设计（24栅格）

语法：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype媒体类型：


实现方式：

@media screen and (min-width: **px) and (max-width: **px){

　　　　CSS-Code;

}

CSS-Code:

.row{
    &:after{
        content:"";
        height:0;
        display:block;
        clear:both;
    }
    zoom:1;
}
[class*="col-"]{
    float:left;
    box-sizing: border-box;
}
@media screen and (min-width: 0px) and (max-width: 768px){
    .col-xs-0{
        width: 0%;
        overflow: hidden;
    }
    .col-xs-1{
        width: 4.16666667%;
    }
    .col-xs-2{
        width: 8.333333333%;
    }
    .col-xs-3{
        width: 12.5%;
    }
    .col-xs-4{
        width: 16.66666667%;
    }
    .col-xs-5{
        width: 20.83333333%;
    }
    .col-xs-6{
        width: 25%;
    }
    .col-xs-7{
        width: 29.16666667%;
    }
    .col-xs-8{
        width: 33.33333333%;
    }
    .col-xs-9{
        width: 37.5%;
    }
    .col-xs-10{
        width: 41.66666667%;
    }
    .col-xs-11{
        width: 45.83333333%;
    }
    .col-xs-12{
        width: 50%;
    }
    .col-xs-13{
        width: 54.16666667%;
    }
    .col-xs-14{
        width: 58.33333333%;
    }
    .col-xs-15{
        width: 62.5%;
    }
    .col-xs-16{
        width: 66.66666667%;
    }
    .col-xs-17{
        width: 70.83333333%;
    }
    .col-xs-18{
        width:75%;
    }
    .col-xs-19{
        width: 71.16666667%;
    }
    .col-xs-20{
        width:83.33333333%;
    }
    .col-xs-21{
        width: 87.5%;
    }
    .col-xs-22{
        width:91.66666667%;
    }
    .col-xs-23{
        width: 95.83333333%;
    }
    .col-xs-24{
        width:100%;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px){
    .col-sm-0{
        width: 0%;
        overflow: hidden;
    }
    .col-sm-1{
        width: 4.16666667%;
    }
    .col-sm-2{
        width: 8.333333333%;
    }
    .col-sm-3{
        width: 12.5%;
    }
    .col-sm-4{
        width: 16.66666667%;
    }
    .col-sm-5{
        width: 20.83333333%;
    }
    .col-sm-6{
        width: 25%;
    }
    .col-sm-7{
        width: 29.16666667%;
    }
    .col-sm-8{
        width: 33.33333333%;
    }
    .col-sm-9{
        width: 37.5%;
    }
    .col-sm-10{
        width: 41.66666667%;
    }
    .col-sm-11{
        width: 45.83333333%;
    }
    .col-sm-12{
        width: 50%;
    }
    .col-sm-13{
        width: 54.16666667%;
    }
    .col-sm-14{
        width: 58.33333333%;
    }
    .col-sm-15{
        width: 62.5%;
    }
    .col-sm-16{
        width: 66.66666667%;
    }
    .col-sm-17{
        width: 70.83333333%;
    }
    .col-sm-18{
        width:75%;
    }
    .col-sm-19{
        width: 71.16666667%;
    }
    .col-sm-20{
        width:83.33333333%;
    }
    .col-sm-21{
        width: 87.5%;
    }
    .col-sm-22{
        width:91.66666667%;
    }
    .col-sm-23{
        width: 95.83333333%;
    }
    .col-sm-24{
        width:100%;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1200px){
    .col-md-0{
        width: 0%;
        overflow: hidden;
    }
    .col-md-1{
        width: 4.16666667%;
    }
    .col-md-2{
        width: 8.333333333%;
    }
    .col-md-3{
        width: 12.5%;
    }
    .col-md-4{
        width: 16.66666667%;
    }
    .col-md-5{
        width: 20.83333333%;
    }
    .col-md-6{
        width: 25%;
    }
    .col-md-7{
        width: 29.16666667%;
    }
    .col-md-8{
        width: 33.33333333%;
    }
    .col-md-9{
        width: 37.5%;
    }
    .col-md-10{
        width: 41.66666667%;
    }
    .col-md-11{
        width: 45.83333333%;
    }
    .col-md-12{
        width: 50%;
    }
    .col-md-13{
        width: 54.16666667%;
    }
    .col-md-14{
        width: 58.33333333%;
    }
    .col-md-15{
        width: 62.5%;
    }
    .col-md-16{
        width: 66.66666667%;
    }
    .col-md-17{
        width: 70.83333333%;
    }
    .col-md-18{
        width:75%;
    }
    .col-md-19{
        width: 71.16666667%;
    }
    .col-md-20{
        width:83.33333333%;
    }
    .col-md-21{
        width: 87.5%;
    }
    .col-md-22{
        width:91.66666667%;
    }
    .col-md-23{
        width: 95.83333333%;
    }
    .col-md-24{
        width:100%;
    }
}
@media screen and (min-width: 1201px){
    .col-lg-0{
        width: 0%;
        overflow: hidden;
    }
    .col-lg-1{
        width: 4.16666667%;
    }
    .col-lg-2{
        width: 8.333333333%;
    }
    .col-lg-3{
        width: 12.5%;
    }
    .col-lg-4{
        width: 16.66666667%;
    }
    .col-lg-5{
        width: 20.83333333%;
    }
    .col-lg-6{
        width: 25%;
    }
    .col-lg-7{
        width: 29.16666667%;
    }
    .col-lg-8{
        width: 33.33333333%;
    }
    .col-lg-9{
        width: 37.5%;
    }
    .col-lg-10{
        width: 41.66666667%;
    }
    .col-lg-11{
        width: 45.83333333%;
    }
    .col-lg-12{
        width: 50%;
    }
    .col-lg-13{
        width: 54.16666667%;
    }
    .col-lg-14{
        width: 58.33333333%;
    }
    .col-lg-15{
        width: 62.5%;
    }
    .col-lg-16{
        width: 66.66666667%;
    }
    .col-lg-17{
        width: 70.83333333%;
    }
    .col-lg-18{
        width:75%;
    }
    .col-lg-19{
        width: 71.16666667%;
    }
    .col-lg-20{
        width:83.33333333%;
    }
    .col-lg-21{
        width: 87.5%;
    }
    .col-lg-22{
        width:91.66666667%;
    }
    .col-lg-23{
        width: 95.83333333%;
    }
    .col-lg-24{
        width:100%;
    }
}

说明：

　　1、父元素设置class.row清除它的子元素col-**的浮动，避免浮动造成的父元素高度的塌陷；

　　2、.col-**-0使该元素在对应条件下隐藏；

　　3、.col-**设置：box-sizing:border-box是我自己习惯用传统的盒子模型。