给 子元素进行设置不同的大小

在网页设计或HTML/CSS布局中，如果你想要给子元素设置不同的大小，可以使用CSS（层叠样式表）的各种属性。这里有几个常见的方法：

1. **固定尺寸**：可以直接为每个子元素指定固定的宽度和高度，例如 `width: 100px; height: 200px;`。

2. **百分比宽度**：如果需要让子元素的大小相对于其父元素变化，可以使用百分比，如 `width: 50%; height: 50%;`。

3. **响应式设计**：利用媒体查询（Media Queries），可以根据设备屏幕大小动态调整元素大小，比如针对小屏幕设备设置 `@media (max-width: 600px) { ... }`.

4. **弹性布局**：Flexbox或Grid布局允许你在容器内轻松地改变子元素的大小和位置，通过 `flex: 1` 或 `grid-template-columns` 等属性。

5. **自适应布局**：使用 CSS 的 `vw`, `vh`, 和 `em` 单位，可以使元素大小随视口大小自动调整。

.container {
  display: flex;
}

.child1 {
  width: 30%;
  /* 更多样式... */
}

.child2 {
  width: calc(50% - 20px); /* 减去边距 */
  /* 更多样式... */
}

@media screen and (max-width: 768px) {
  .child3 {
    width: 100%;
  }
}