先看一个数：超过一半的访客用手机打开你的网站。如果页面在手机上东倒西歪，人扭头就走。响应式网站就是让同一套代码，在大屏小屏上都排得整整齐齐。

第一步，写对 meta 标签

在 head 里加一行：

``

不加这行，手机浏览器会把页面当成电脑网页缩着显示，字小得看不清。加了，页面宽度才跟屏幕对齐。

第二步，别写死宽度

用百分比代替固定像素。容器写 `width: 100%`，图片写 `max-width: 100%; height: auto`。这样屏幕变窄，跟着缩，不会撑出横向滚动条。横向滚动条是移动端体验的头号杀手。

第三步，用媒体查询分档

主流分档：手机默认样式，平板 768px，桌面 1024px。

css
@media (min-width: 768px) { ... }


@media (min-width: 1024px) { ... }

先写手机样式，再用 min-width 往上加。比反过来写省事，因为手机端规则最少。

第四步，布局换掉

手机一列，桌面多列。别用 float 那套老办法，用 Flexbox 或 Grid。

css
.card-list { display: grid; grid-template-columns: 1fr; gap: 16px; }


@media (min-width: 768px) {


.card-list { grid-template-columns: repeat(3, 1fr); }


}

几行代码，列数随屏幕变。

第五步，字体和点击区域

正文最小 16px。按钮高度至少 44px，手指点得中。导航在手机上收进汉堡菜单，别硬塞一排链接。

第六步，真机测

浏览器开发者工具有设备模拟，但别只信它。拿真手机走一遍：图片加载、菜单展开、表单输入。模拟器里好好的，真机上出问题的不少。

最后一条实用建议

别一上来就想着适配所有设备。先保证 375px 宽的手机和 1440px 宽的电脑这两头好看，中间尺寸自然过渡。断点按需要定，不按设备型号定——挤了就加断点，这才是响应式的本意。