换个角度想
响应式像倒进不同杯子的水：水还是那些水，杯子是什么形状，它就呈现什么形状。内容不变，变的是容器里的排布。
术语 · 前端
响应式设计
Responsive Design
让同一页面根据屏幕宽度自动适配桌面、平板和手机。
同一个页面，适应不同屏幕
一份内容
nav导航 × 1
cards卡片 × 3
cta按钮 × 1
屏幕一变，布局跟着变
- 内容只有一份
nav导航 × 1cards卡片 × 3cta按钮 × 1 @media (max-width: 680px)
换一套布局规则
宽屏 · 三栏 窄屏 · 单栏
内容只写一份
什么时候会遇到它
手机优先
大多数访问来自手机，先做好窄屏体验，再扩展到宽屏。
适配平板
中间宽度最容易被忽略，断点让平板也有合理的布局。
排查错位
某个宽度下元素挤成一团，多半是断点之间漏了规则。
想一想
设计稿只画了电脑版，手机上导航放不下了。是再做一个手机版网站吗？
看答案
不用。同一份页面加断点：窄屏时导航折叠成菜单按钮、多栏叠成单栏——一份内容，配多套布局规则，这正是响应式的做法。
最容易踩的坑
响应式不只是「能塞下」。窄屏要重新考虑信息优先级：什么先看到、什么收起来，而不是把桌面版等比例缩小。