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

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>

CSS代码：

设置视口：

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

PC端：

/* 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端：

/*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;
  }
}

PC端效果（呈4排显示）：

iPad端效果（双排显示）：

Android端效果（单排显示）：