如何实现响应式设计？有哪些常用方案？

/* 基础样式（移动端优先） */
.container {
  padding: 16px;
}

/* 平板 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* rem：相对根字号 */
html { font-size: 16px; }
.title { font-size: 2rem; }  /* 32px */

/* vw/vh：视口百分比 */
.hero { height: 100vh; }
.sidebar { width: 20vw; }

/* clamp()：响应式字号 */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* 最小 1.5rem，理想 4vw，最大 3rem */
}

img {
  max-width: 100%;
  height: auto;
}

/* 根据屏幕加载不同图片 */
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="responsive image">
</picture>

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

/* 移动端优先策略 */
/* 手机：默认 < 768px */
/* 平板：768px - 1024px */
/* 桌面：> 1024px */
/* 大屏：> 1440px */