HTML多端适应 响应式布局案例

<div id="one">
  <div class="aa"></div>
  <div class="aa"></div>
  <div class="aa"></div>
  <div class="aa"></div>
  <div class="aa"></div>
  <div class="aa"></div>
  <div class="aa"></div>
  <div class="aa"></div>
</div>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

/* pc */
@media only screen and (min-width: 600px)  {
  .aa{
    width: calc(94%/4);
    margin-left: 2%;
    height: 200px;
    margin-top: 10px;
  }
  .aa:nth-child(4n+1){
    margin-left: 0;
  }
}

/*ipad*/
@media only screen and (min-width: 300px) and (max-width: 600px) {
  .aa{
    width: calc(98%/2);
    margin-left: 2%;
    height: 200px;
    margin-top: 10px;
  }
  .aa:nth-child(2n+1){
    margin-left: 0;
  }
}

/*phone*/
@media only screen and (min-width: 0px) and (max-width: 300px) {
  .aa{
    width: 100%;
    margin-left: 0;
    height: 200px;
    margin-top: 10px;
  }
}