CSS响应式设计（Responsive Web Design，RWD）是指通过使用不同的CSS样式规则来使网站在不同设备和屏幕尺寸上都能呈现良好的布局和视觉效果的设计方法。以下是一些常见的CSS响应式方案及案例：

1. 媒体查询（Media Queries）

媒体查询是CSS响应式设计中最常用的技术之一。通过媒体查询，我们可以针对不同的屏幕尺寸和设备类型应用不同的CSS样式。

例子：

/* 默认样式 */
.container {
  width: 100%;
}

/* 针对至少宽度为768px的设备应用样式 */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* 针对至少宽度为992px的设备应用样式 */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

/* 针对至少宽度为1200px的设备应用样式 */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

2. 盒模型（Box-sizing）

使用box-sizing属性可以更轻松地控制元素的宽度和高度，尤其是在设置内边距和边框时。通过将box-sizing属性设置为border-box，元素的宽度和高度将包括其内边距和边框。

例子：

* {
  box-sizing: border-box;
}

3. 百分比布局（Percentage-based Layout）

使用百分比单位为元素的宽度和高度指定一个相对于其容器的比例。这可以使元素在不同尺寸的屏幕上更好地自适应。

例子：

.container {
  width: 100%;
}

.column {
  width: 100%;
}

@media (min-width: 768px) {
  .column {
    width: 50%;
  }
}

4. Flexbox布局（Flexible Box Layout）

Flexbox是一种现代化的布局方式，可以让元素在容器中自动分配空间和自适应大小。这对于响应式设计非常有用。

例子：

.container {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1;
}

5. 网格布局（CSS Grid Layout）

CSS Grid Layout是一种强大的二维布局系统，允许开发人员轻松地创建复杂的响应式布局。

例子：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

这些响应式方案可以相互结合使用，以便根据需要创建更复杂和灵活的布局。