响应式里最容易先见效的，是图片缩放和导航折叠

响应式设计讲起来可以很大，但真落到一个老页面改造时，最先让人头疼的常常不是整套布局，而是几个特别显眼的元素：一张固定宽度的大图，或者一排在桌面端很自然、到手机上立刻挤爆的导航。

图片如果不跟着容器收缩，布局很快就会破

很多旧页面的图片尺寸是写死的，桌面端看不出问题，一到窄屏就会把整个内容区撑开。最基础也最有效的处理方式，就是让图片跟随父容器收缩，而不是坚持自己的原始宽度。

这件事看似只是 CSS 调整，实际影响很大。图片一旦越界，页面就会出现横向滚动条，用户需要左右拖动才能看完整内容，阅读体验马上变差。

导航在窄屏下不能只靠“字变小”

横向导航是另一类高频问题。桌面端五六个栏目排一行没什么压力，到了手机上如果还是硬塞，只会出现换行、重叠或者点击区域过小。真正合适的做法，往往是换一种呈现形式，而不是死撑原布局。

有些项目会把导航改成下拉，有些会先隐藏次级栏目，只保留最重要的入口。这里没有唯一答案，但有一个原则很实用：手机端的导航首先要保证点得准，其次才是展示得全。

响应式改造应该先救“最碍事”的部分

我越来越觉得，响应式设计在项目里推进时，不一定非要一口气把所有模块都做得很完美。先把最影响阅读和操作的部分处理掉，比如宽图、横向导航、表格溢出，用户感知就会立刻改善。

这也是老项目比较现实的改造顺序。不是所有页面都值得整版重做，但几处关键部位先做对，整站的移动访问体验就能上一个台阶。

小结

响应式设计不总是从复杂布局开始，很多时候真正立竿见影的，是图片和导航这些最容易在窄屏上失控的元素。先把它们处理好，页面就已经从“勉强能看”往“愿意继续用”迈了一大步。