CSS实现一个响应式布局

[metroluffy]

CSS实现一个响应式布局

题目

请用CSS实现一个1行4列占满宽度的布局，每个子项要求有 1px 的黑色边框。当设备宽度小于 720px 时，布局变换为2行2列，当设备宽度小于 360px 时，布局变换为4行1列。

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

实现

1. 使用 flex 布局，搭配 MediaQuery 实现响应式

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* 以上两项可以简写为 flex-flow属性 */
}

.item {
  height: 100px;
  box-sizing: border-box;
  border: 1px solid black;
  flex: 0 0 25%
}
@media screen and (max-width: 720px) {
  .item {
    flex: 0 0 50%
  }
}

@media screen and (max-width: 360px) {
 .item {
    flex: 0 0 100%
  }
}

2. 也可以使用grid布局

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 720px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 360px) {
  .container {
    grid-template-columns: 1fr;
  }
}

可以通过以下链接调试：

https://codepen.io/liusw/pen/WNQaarP