響應式佈局的簡單案例演示

這篇文章是一個響應式佈局的案例演示
效果：最初是4部分都在一行顯示，當滿足最大寬度爲700px時，只有兩部分在一行顯示，當最大寬度爲360時，一行只顯示一部分，代碼如下 ：

1. 結構代碼

  <div class="box">
    <ul>
      <li>加油</li>
      <li>加油</li>
      <li>加油</li>
      <li>加油</li>
    </ul>
  </div>

2. CSS樣式代碼

2.1 四部分在一行顯示的樣式

	* {
      	margin: 0;
      	padding: 0;
    }

    .box {
      width: 100vw;
      height: 200px;
    }

    .box li {
      float: left;
      width: 25%;
      height: 200px;
      line-height: 200px;
      text-align: center;
      background: aliceblue;
      box-sizing: border-box;
      border: 1px solid #fff;
      list-style: none;
      user-select: none;
    }

2.2 兩部分在一行顯示的樣式

@media all and (max-width: 700px) {
      .box li {
        width: 50%;
      }
}

2.3 一部分在一行顯示的代碼

@media all and (max-width: 360px) {
      .box li {
        width: 100%;
      }
}

3.效果展示