做网站，先别急着写代码啦。打开你电脑上的浏览器，把窗口慢慢拉窄，再拉宽。如果网页跟着变、不乱跑、不用左右滑，这网站就及格了。这就是响应式，没那么多玄乎的。

第一步，把手机当回事。很多人做网站先看电脑效果，末了说才补手机版，结果一团糟。反过来：先画手机上的样子。手机屏幕窄，逼你删掉没用的东西。哪些必须留，哪些可以藏，一目了然。

第二步，别写死宽度。新手最常犯的错是给每个盒子设定固定像素，比如宽度960。屏幕一窄就装不下。换成百分比或者更省事的办法：用flex布局。比如一行放三个卡片，写`display:flex; flex-wrap:wrap;`，里面卡片写`flex:1 1 200px;`。意思是每张卡片最少200像素宽，放不下就自动换行。这一行代码顶你折腾半天。

第三步，图片要听话。给图片加一行样式：`img{max-width:100%; height:auto;}`。图片永远不会撑破容器，宽了自动缩。别用背景图硬撑尺寸，除非你确定它在小屏上也好看。

第四步，媒体查询是补丁，不是主力。媒体查询就是“屏幕小于600像素时，用另一套样式”。有人上来就写一堆断点，每个设备调一遍，累死。先让默认样式扛住所有情况，实在调整不了再加断点。比如手机上菜单变成汉堡按钮，这就必须用媒体查询。记住：断点越少越好。

第五步，字体和按钮别太小。手机上正文最少16像素，按钮高度至少44像素。手指点不准，用户就跑了。字体用系统默认的就行，别整花哨的网页字体，加载慢还容易乱。

第六步，实测。写完代码，别只在自己的手机上试。找个旧手机、小平板，或者浏览器开发者工具里的设备模拟。重点看三处：导航能不能用，表格会不会溢出，弹窗有没有被裁掉。发现问题就回去调样式，别猜。

末了说说个笨办法：每写完一个模块，立刻拉窄窗口看一眼。养成习惯，比末了说通宵改省事得多。

响应式不是技术炫技，是让每个打开网站的人都不骂娘。就这些，动手吧。