客户昨天发来一张截图，手机打开他公司网站，导航栏挤成一团，图片撑出屏幕，右下角还飘着半个“联系我们”按钮。他问：这网站是不是坏了？

没坏。只是三年前做的时候，只盯着电脑屏幕看。

响应式不是什么高深技术。说白了就一件事：让同一个页面，在手机、平板、电脑上都能正常看、正常点。原理也简单，浏览器窗口变窄，样式跟着变。你定几条规则，自己挪位置。

动手之前先干一件事：拿手机打开你现在的网站。哪个地方要放大才能点，哪个地方字小得看不清，记下来。这就是你要改的地方。

第一步，加一行meta标签。这行代码告诉手机：别自作主张把页面缩成邮票大小，按设备实际宽度来。``，放在head里，就这一行，手机上看网页不再整体缩小。

第二步，别写死宽度。px可以扔了，换成百分比和rem。导航条原来固定960像素宽，手机屏幕才375像素，当然溢出。试试宽度100%，内部用flex布局。几行代码，菜单自动换行。

第三步，图片要听话。一张1920像素宽的大图，手机加载慢，显示还溢出来。给图片加`max-width:100%; height:auto;`，图片最大不超过容器，比例不变。

第四步，用媒体查询。这是响应式的核心工具。比如屏幕宽度小于768像素时，让侧边栏藏起来，主体占满。写法不复杂：`@media (max-width:768px){ .sidebar{display:none} }`。就这几句，手机上看清爽多了。

第五步，移动端优先。先设计手机版，再往上加电脑版样式。为什么？手机屏幕窄，逼迫你只留最关键的。等做到电脑版，加宽、加栏、加大间距，越做越顺。反过来先做电脑版，塞满了，到手机上根本砍不下去。

几个容易踩的坑。字体别用12px，手机上太小，16px起步。按钮别做30像素高，手指点不准，44像素以上。表格在手机上别硬撑，横着滚动或者拆成卡片。视频和地图这类嵌入，给个100%宽度，别让它们撑破布局。

测试更简单。电脑浏览器按F12，打开设备模拟，选iPhone、安卓、iPad挨个看。真机再试一遍，体验最准。

别追求一次做完美。响应式是调出来的。先让网站在手机上不坏，再让它好看，最后呢让它快。三步走完，网站就活了。