如何设置CSS的响应式布局？

要设置CSS的响应式布局，可以采取以下几个步骤：

使用媒体查询（Media Queries）

媒体查询是CSS中用于根据设备屏幕尺寸和特性应用不同样式的技术。通过在CSS中添加媒体查询，您可以根据屏幕宽度、高度、方向等条件来应用不同的样式。

例如，以下是一个简单的媒体查询示例，将在屏幕宽度小于600像素时应用特定的样式：

@media screen and (max-width: 600px) {
  /* 在屏幕宽度小于600像素时应用的样式 */
  /* 可以在这里设置元素的宽度、高度、布局等属性 */
}

使用相对单位

使用相对单位（如百分比、em、rem）而不是固定像素值可以使元素根据屏幕尺寸进行自适应调整。相对单位可以根据父元素或根元素的大小进行相对计算，从而实现响应式布局。

弹性布局（Flexbox）和网格布局（Grid）

Flexbox和Grid是CSS中的两种强大的布局模型，可以帮助您创建灵活的响应式布局。它们提供了更直观和简洁的方式来定义元素的排列方式和对齐方式。

图片和媒体的自适应

使用CSS属性（如max-width: 100%）来确保图片和媒体元素在不同屏幕尺寸下自适应调整大小。