了解Bootstrap响应式原理：用less写十二栅格化

@cols:12;
//行数
@num1:1200px;
//假定阈值1为屏幕最小宽度1200px
@num2:900px;
//阈值2为屏幕最小宽度900px


*{
    box-sizing: border-box;
    //border和padding计算入width之内
}

.clear(){
  //清除浮动
   &{
    &:before,&:after{
      content:"";
      display:block;
      clear:both;    
    }
  }
}

.container{
  //流式布局
  &-fluid{
    width:100%;
    .clear();
  }
  &-fluid > .row{
    width:100%; 
    .clear();
  }

  &{
    width:600px;
    .clear();
  }
  & > .row{
    width:100%;
    .clear();
  }
}

// l 大屏  m 中屏 s小屏
//小屏优先，实际区间范围w<900px
.for(s);
//在小屏的情况，让大屏和中屏的hide不成立，小屏的设置成立
.col-l-hide{
    display:block;
}
.col-m-hide{
    display: block;
}
.col-s-hide{
    display: none;
}

//中屏
//最小宽度900px;w>900执行;再加上之后大屏的情况，实际区间范围是900<w<1200
@media screen and (min-width:@num2){
  .for(m);
  .container{
      width: @num2;
  }
  //在900-1200px中，让s和l的情况不成立，m的情况成立
  .col-s-hide{
      display: block;
  }
  .col-l-hide{
      display: block;
  }
  .col-m-hide{
      display: none;
  }
}

//大屏
//最小宽度1200px，w>1200px执行
@media screen and (min-width:@num1){
  .for(l);
  .container{
      width: @num1;
  }
  .col-s-hide{
      display: block;
  }
  .col-m-hide{
      display: block;
  }
  .col-l-hide{
      display: none;
  }
}


.for(@type,@i:1) when (@i<=@cols){
  //@type:状态s/m/l
  //@i:选择的是十二分之几
  .container > .row > .col-@{type}-@{i}{
     width:@i/@cols*100%;
     //实际的宽度等于  所占比例/12*100%
     float:left;position: relative;

   }
   
  //设置offset
   .container > .row > .col-@{type}-offset-@{i}{
        margin-left:@i/@cols*100%;
   }
   
    // 偏移距离,push推【从左到右】，pull拉【从右到左】
    .container > .row > .col-@{type}-push-@{i}{
        left:@i/@cols*100%;
   }
   
   .container > .row > .col-@{type}-pull-@{i}{
       left:-@i/@cols*100%;
   } 
   
  .container-fluid > .row > .col-@{type}-@{i}{
    width:@i/@cols*100%;
    float:left;position: relative;
  }
  
  .for(@type,@i+1);
}