响应式布局时的页面分布控制

题目要求：

在进行响应式布局的条件下，界面宽度为360px，当界面拉长到768px时，页面分为两列；当界面拉长到1200px时，界面分为三列。具体体现如下图所示：

最初：

界面长度为768px时：

界面长度为1200px时：

实现过程（媒体查询）：

方法一：flex布局

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  /* 1 表示 flex-grow 属性的值为 1。这意味着当有剩余空间时,该项目会占据剩余空间的 1 份。*/
  /* 0 表示 flex-shrink 属性的值为 0。这意味着当空间不足时,该项目不会缩小*/
  /* 200px 表示 flex-basis 属性的值为 200 像素。这是该项目的初始大小*/
  flex: 1 0 200px; /* flex-grow、flex-shrink 和 flex-basis */
  background-color: #f1f1f1;
  padding: 20px;
}

/* 根据屏幕宽度调整列数 */
@media (min-width: 768px) {
  .box {
    /*calc(50% - 10px) 是一个 CSS 函数,用于动态计算值。在这里,它计算出 50% 减去 10 像素的值作为 
    flex-basis 的初始大小*/
    flex: 1 0 calc(50% - 10px); /* 两列布局 */
  }
}

@media (min-width: 1200px) {
  .box {
    flex: 1 0 calc(33.33% - 13.33px); /* 三列布局 */
  }
}

方法二：网格布局

article {
    display: grid;
    /* auto-fill：这个关键词告诉浏览器自动根据可用空间填充网格,而不是指定固定的列数 */
    /* minmax(200px, 1fr)：这个函数定义了网格列的最小和最大尺寸 */
    grid-column-gap: 24px;
}

/* 根据屏幕宽度调整列数 */
@media (min-width: 768px) {
    article {
        grid-template-columns: repeat(2, 1fr);
        /* 两列布局 */
    }
}

@media (min-width: 1200px) {
    article {
        grid-template-columns: repeat(3, 1fr);
        /* 三列布局 */
    }
}