做网站先别急着写代码。打开电脑，把浏览器窗口从满屏慢慢拖窄。页面如果开始错位、文字挤成一团、图片撑破屏幕，说明它还没“响应”。响应式就一件事：同一个页面，屏幕大就铺开，屏幕小就收拢，不另做一套手机版。

第一步，加一行标签。在HTML的head里放：

没有它，手机浏览器会假装自己是宽屏，把整个页面缩小塞进屏幕，字小得没法看。这行代码告诉浏览器：按设备真实宽度来。

第二步，别写死宽度。新手最爱写width: 960px，结果手机屏幕只有375px，直接溢出。改成百分比或者max-width。图片加一句img { max-width: 100%; height: auto; }，它就会跟着容器缩，不再横冲直撞。

第三步，用媒体查询换布局。电脑上三栏并排，手机上三栏叠成一列。写法很直白：

@media (max-width: 768px) {

.column { width: 100%; }

}

意思是：屏幕窄于768px时，每栏占满一行。断点不用设太多，768px和480px两个够大多数项目用。先按手机排，再往上加宽度，比反过来省事。

第四步，字体和按钮别抠门。手机上看，正文小于16px就费劲。按钮和链接的点击区域至少44px见方，手指才点得准。行高给到1.5以上，密麻麻的段落没人愿意读。

第五步，导航要会缩。桌面上一排横向菜单，手机上塞不下，就收进一个“菜单”按钮，点开再展开。用几行JavaScript切换一个class就行，不需要上框架。

第六步，拿真机试。浏览器开发者工具里切到手机模式只是参考。真拿手机打开，转横屏，点按钮，看图片加载快不快。流量状态下页面超过两三秒才出来，多半是图片没压缩。

最后呢，别追完美。先把主流程在手机上跑通：能看清、能点中、不横向滚动。剩下的是打磨。响应式不是炫技，是让拿手机的人也能把事办完。