先看一个数：超过一半的访客是用手机打开你网站的。如果页面在手机上错位、字小得看不清、按钮点不到，人扭头就走。响应式网站就是让同一套代码，在手机、平板、电脑上都排得顺眼。做起来没那么玄。

第一步，先定规矩。在页面头部加一行 viewport 设置，告诉手机浏览器按设备实际宽度来渲染。这行不加，后面全白搭。

第二步，别写死宽度。老做法是给容器定个 960 像素，手机屏幕一窄就横向滚动。改成百分比或者 max-width，让自己伸缩。图片也一样，设成 max-width:100%，它就不会撑破容器。

第三步，用媒体查询分档。常见做法是按屏幕宽度分几个区间，比如手机一档、平板一档、桌面一档。每档里微调布局：三栏变一栏、导航收进汉堡菜单、字号调小一点。档位别设太多，三四个够用，多了维护起来头疼。

第四步，移动端优先。先写手机样式，再往上加宽屏规则。这样基础样式最简单，小屏幕加载也快。反过来做，你得不停覆盖规则，代码越写越乱。

第五步，实测。别只拖浏览器窗口看。拿真手机打开，试试单手能不能点到按钮，横屏竖屏切换有没有崩，输入框弹出键盘会不会挡住。这些细节最容易被忽略，也最影响体验。

工具上，手写 CSS 完全够用。想省事可以用现成框架，但先搞懂原理再上手，不然出了问题都不知道从哪查。

最后呢提醒一句：响应式不是做完就完事。新加、改版式，都得回头在手机上看一眼。养成这个习惯，网站才不会越改越难用。