backup responsive design - media query is not good

responsive.less

@import 'grid.less';

// Specify the number of columns and set column and gutter widths
@columns: 12;
@column-width: 60;
@gutter-width: 20;

// Remove the definition below for a pixel-based layout
@total-width: 100%;

// header

//desktop first media query, from big size to small
//need to fully tested at the tipping point, make each value exclusive??
@media screen and (max-width: 720px) {

}

//iPad and smaller than it
@media only screen and (max-width: 959px) {

}

//iPad Protrait
@media only screen and (min-width: 768px) and (max-width: 959px) {

}

//iPhone Landscape. 480 <= device-width <= 767, not until 768px
//!! put only screen back !!
@media only screen and (min-width: 480px) and (max-width: 767px) {
  //type here
  body{background-color: #fffbab;}
  #layout-header {
    .column(12);
  }
  //hide home button
  .current.first{
    display: none;
  }
  //logo
  #header img{
    max-width: 100%;
  }
  //navigation
  #layout-navigation{
    .row(12);
  }
  //nav menu height
  nav ul li{
    height: 27px;
  }
  .widget-navigation.widget-menu-widget.widget {
//    background-color: pink;
    .column(9,12);
    height: 34px;
//    .row(9);
  }
  .widget-navigation.widget-search-form.widget {
//    background-color: #4ecaff;
    .column(3,12);
    height: 34px;
    //search button
    button{
      width: 47px;
      padding-left: 0px;
      padding-right: 0px;

    }
    input{
      width: 90px;
    }
    fieldset{
      padding-top: 3px;
    }
  }
  //Main content
  #layout-main-container,
  #layout-main {
    .column(12);
    img{
      max-width: 100%;
    }
  }
  ///////////////// triple area ////////////////
  //adjust margin
  .zone figure{
    margin: 12px;
  }
  .zone.zone-tripel-first,
  .zone.zone-tripel-second,
  .zone.zone-tripel-third{
    padding: 0px;

  }

  //set these value to override site.css
  #layout-tripel-container,
  #layout-tripel{
    .row(12);

    //set triple one to the left
    #tripel-first{
      background-color: #ff0000;
      .column(6,12);
      margin: 0px;
    }
    //set triple two to the right
    #tripel-second{
      background-color: cornflowerblue;
      .column(6,12);
      margin: 0px;
    }
    //split tripel-third
    //clearfix
    #tripel-third{
      .clearfix;
      background-color: brown;
      //.row(8);
      display: inline;
      float: left;
      width: 95.842%;
      //margin: 0 1.0416666666666665%;
      margin: 0px;
//      position: relative;

      figure:first-child{
        //.column(4,8);
        width: 46.75%;
        float:left;
      }
      figure:nth-child(2){
        //.column(4,8);
        width: 46.75%;
        float: left;
      }
    }

  }

}

//iPhone Protrait. x <= 479
@media only screen and (max-width: 479px) {

}

/* ipad Mini Landscape */
@media only screen and (width:1024px) and (resolution: 163dpi) {
  div#container{
    background-color: #0000CC;
  }
}