什么是响应式网站 / 移动端适配？

它到底是什么

响应式的核心不是「手机上也能看」，而是同一份内容在不同屏幕上重新排布：桌面三栏在手机上变单栏，导航收进菜单，表格改为卡片。内容不变，呈现方式变。

它与「单独做移动站」的区别在维护成本：一套代码改一次全端生效；两套代码则要同步两次，长期必然出现内容与功能不一致。

怎么运作的

视口设置：页面头部声明 viewport，让布局宽度等于设备宽度，否则手机会按桌面宽度缩放，字小到无法阅读。

弹性布局：用百分比、flex、grid 替代固定像素宽度，让容器随屏幕伸缩。

断点：在特定宽度切换布局，常见断点对应手机、平板、桌面三档。断点数量不是越多越好，太多会让样式难以维护。

资源适配：按屏幕密度提供不同尺寸图片，避免手机上加载桌面大图，这是移动端性能最常见的浪费。

容易混的几个概念

• 自适应（AWD）：为几种固定尺寸各做一套布局，与响应式的流式适配不同。
• 移动站（m 站）：独立域名与代码，与桌面站分开维护。
• 移动端适配：更宽的概念，包含响应式、移动站、单独 App 等方案。
• 流式布局：响应式的一种实现手段，不做断点切换。