你可能会说
这个页面在手机上全挤在一起了，帮我做一下移动端适配。
响应式设计让一套页面自动适配所有屏幕尺寸——手机、平板、电脑都呈现最佳布局。
网页能根据屏幕大小自动调整布局。手机上单列显示，平板上两列，电脑上三列——同一份代码适配所有设备。
生活类比
像水一样——倒进杯子是杯子的形状，倒进瓶子是瓶子的形状，内容不变但形态自适应。
🎮 动手试试
同一份代码，容器变窄时自动从 3 列变成 3 列——这就是响应式
「移动优先」的 CSS 写法，应该用哪种媒体查询扩展到大屏？
你可以这样告诉 AI
帮我把这个页面改成响应式：电脑上两列布局，手机上变成单列，导航栏在小屏变成汉堡菜单。
响应式是连续流动适配，自适应是检测断点后跳到固定布局。响应式更灵活。
移动优先是一种策略：先写手机样式，再用 min-width 媒体查询扩展到桌面。
面向多端用户
用户可能用手机、平板、电脑访问的任何网站
内容型网站
博客、新闻、文档等以阅读为主的站点
纯桌面应用
内部管理系统如果只在电脑用，可以不做移动适配
需要原生体验
复杂手势、离线功能等考虑做原生 App 或 PWA
@media (max-width: 768px) { ... } 根据屏幕宽度应用不同样式
用 flex 和 grid 让元素自动换行、伸缩
用 %、rem、vw 代替固定 px，随容器缩放
布局切换的临界宽度，如 640px、768px、1024px
先写最小屏样式，逐步增强到大屏
先写桌面样式，用 max-width 逐步缩减到小屏