响应式布局的简单案例演示

这篇文章是一个响应式布局的案例演示
效果：最初是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.效果展示