响应式设计：从移动到桌面

响应式不是“做三个网站”，而是同一套结构在不同宽度下优雅重排。先移动布局，再增强桌面，往往更稳。

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

.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

图片用 max-width: 100%；字体可用 clamp() 做流式字号。