前端
响应式设计Responsive Design
你可能会问
响应式设计到底是什么？为什么同一个网页在手机和电脑上长得不一样？
简单来说
让同一页面根据屏幕宽度自动适配桌面、平板和手机。
一份内容
nav导航 × 1
cards卡片 × 3
cta按钮 × 1
屏幕一变，布局跟着变
01 · 先这样理解
把抽象概念放进真实场景
让同一页面根据屏幕宽度自动适配桌面、平板和手机。
换个角度想响应式像倒进不同杯子的水：水还是那些水，杯子是什么形状，它就呈现什么形状。内容不变，变的是容器里的排布。
02 · 点击演示
拖一拖屏宽，页面怎么变？
突出显示的部分，就是当前概念在整条流程中负责的位置。
- 内容只有一份
nav导航 × 1cards卡片 × 3cta按钮 × 1 @media (max-width: 680px)
换一套布局规则
宽屏 · 三栏 窄屏 · 单栏
1 / 4
Content · 内容只写一份
03 · 放进真实任务
什么时候会遇到它
手机优先
大多数访问来自手机，先做好窄屏体验，再扩展到宽屏。
适配平板
中间宽度最容易被忽略，断点让平板也有合理的布局。
排查错位
某个宽度下元素挤成一团，多半是断点之间漏了规则。
04 · 想一想
用一个问题检查理解
设计稿只画了电脑版，手机上导航放不下了。是再做一个手机版网站吗？
查看答案
不用。同一份页面加断点：窄屏时导航折叠成菜单按钮、多栏叠成单栏——一份内容，配多套布局规则，这正是响应式的做法。
最容易踩的坑
响应式不只是「能塞下」。窄屏要重新考虑信息优先级：什么先看到、什么收起来，而不是把桌面版等比例缩小。