先看一个常见问题：电脑上排得好好的三栏，到手机上挤成一团。原因就一个——宽度写死了。响应式要做的，就是让页面自己认屏幕。

第一步，加一行代码。在 head 里放这个：

``

不加它，手机浏览器会假装自己是980像素宽的桌面，然后整页缩小，字小得看不清。加了，页面才按真实屏幕宽度算。

第二步，别用固定像素。把 `width: 960px` 换成百分比或 `max-width`。比如容器写 `width: 90%; max-width: 1100px`。大屏不无限拉宽，小屏自动缩。图片加一句 `max-width: 100%; height: auto;`，保证不撑破容器。

第三步，上媒体查询。这是响应式的核心，说白了就是“屏幕窄到一定程度，换一套样式”。

css
/ 默认手机样式 /


.col { width: 100%; }


/ 屏幕宽于768px时改成两栏 /


@media (min-width: 768px) {


.col { width: 50%; float: left; }


}


/ 宽于1024px时三栏 /


@media (min-width: 1024px) {


.col { width: 33.33%; }


}

顺序有讲究：先写小屏，再用 min-width 往上加。这叫移动优先。反过来写也行，但容易漏掉某个断点。

再说断点怎么定。别抄别人的768、992。打开浏览器开发者工具，慢慢拖窄窗口，看你的在哪个宽度开始变丑，那个宽度就是你的断点。说了算，数字说了不算。

第四步，注意几个坑。字体别用固定 px，正文用 `1rem` 左右，随根字号缩放。导航在窄屏上塞不下，就改成汉堡菜单或直接竖排，别硬挤。表格宽了会溢出，给它包一层 `overflow-x: auto`。

还有，真机测试。开发者工具里的手机模式只是模拟，手指点按的手感、实际的字体渲染，还得拿手机看。至少试一台小屏安卓和一台 iPhone。

响应式不神秘。一句话：宽度用相对值，关键处加媒体查询，决定断点。做到这三点，你的页面在电脑、平板、手机上都不会散架。