综合实战 · 响应式静态网站开发

/* 桌面：三栏卡片 */
.cards { display:grid; grid-template-columns:repeat(3,1fr); }

/* 平板：两栏 */
@media (max-width: 980px) {
  .cards { grid-template-columns:repeat(2,1fr); }
}

/* 手机：单栏，导航折叠 */
@media (max-width: 680px) {
  .cards { grid-template-columns:1fr; }
  .nav { display:none; } /* 改用汉堡菜单 */
}