css响应式布局

/* CSS 响应式布局示例 */

/* 1. 使用媒体查询调整不同屏幕尺寸下的样式 */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 2. 使用弹性盒子（Flexbox）实现响应式布局 */
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 200px; /* 每个项目的最小宽度为200px，允许其在小屏幕上换行 */
  margin: 10px;
}

/* 3. 使用栅格系统（Grid）实现响应式布局 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.grid-item {
  background-color: lightcoral;
  padding: 20px;
  text-align: center;
}

/* 解释说明：
- 媒体查询 (`@media`) 用于根据不同的屏幕宽度应用不同的样式。
- 弹性盒子 (`flexbox`) 可以让元素自动调整大小和排列方式，适应不同的屏幕尺寸。
- 栅格系统 (`grid`) 提供了更强大的布局控制，能够创建复杂的响应式布局。 */