响应式布局是现代 Web 开发的必备技能，让页面在不同设备上都能良好呈现。
移动优先
先写移动端样式，再用 min-width 媒体查询向上扩展，这是推荐的做法。
Flexbox 弹性盒子
一维布局利器，适合导航栏、工具栏、卡片行等场景。
CSS Grid 网格
二维布局王者，配合 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) 可实现自适应卡片网格。
结合 clamp()、vw/vh 等视口单位，能打造更灵活的响应式体验。