自适应与响应式的区别
严格说，“自适应”和“响应式”是两个概念：自适应（Adaptive）通常指为几套固定断点设计多个布局，服务器或前端检测屏幕后切换；响应式（Responsive）则是同一套代码，布局随宽度连续变化。实际工作中两者经常混用，无需纠结术语。
另一个相关概念是“移动端适配”（如 1px 边框、安全区、rem 方案），它针对手机浏览器的特殊性做处理。可以把它们理解为一套组合拳：响应式布局负责整体框架，移动端适配负责细节体验。
- 响应式：一套代码，布局随宽度连续平滑变化
- 自适应（传统意义）：检测设备，在几套布局中切换
- 移动端适配：处理 1px、安全区、触摸区域等手机细节
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .row { display: flex; flex-wrap: wrap; gap: 8px; } /* 响应式：宽度连续变化，挤不下就自动换行，没有固定断点 */ .col { flex: 1 1 240px; padding: 12px; border: 1px solid #ddd; border-radius: 6px; } </style> </head> <body> <div class="row"> <div class="col">A</div><div class="col">B</div><div class="col">C</div> </div> </body> </html>
本节要点不必纠结术语：现代开发普遍采用“响应式布局 + 移动端细节适配”的组合方案。
