做网站，先别想着多好看啊。第一件事，让它在手机上能看。

很多人的做法是：电脑上做完，拿手机打开一看，乱了。再去改。改完电脑上又乱了。来回折腾。这叫补丁式做法，不叫响应式。

真正的响应式，从写第一行代码前就开始了。

一、先定规矩：手机优先

别一上来就画电脑版。先打开手机的画板，375像素宽，把塞进去。能塞下，说明你抓住了核心。塞不下，说明你贪心了。

手机版就三件事：、、一个按钮。别的先不放。做完这个，再往平板、电脑上扩。这叫渐进增强，听着专业，其实就是“先把小的做好”。

二、别写死宽度

新手最爱写`width: 960px`。一写这个，手机就废了。它不会自己变小，只会撑出滚动条，或者被切掉。

换成百分比。`width: 100%`、`max-width: 960px`。意思是：你最多960，但空间不够你就缩。让它自己适应，别跟它较劲。

图片也一样。加一句`img { max-width: 100%; height: auto; }`。图片自己会缩，不用你管。

三、媒体查询没那么玄

媒体查询就是一句话：屏幕小的时候，走另一套样式。

写法很简单：

css
@media (max-width: 768px) {


.nav { display: none; }


.menu-btn { display: block; }


}

意思是：屏幕宽度小于768时，导航藏起来，菜单按钮露出来。就这么直接。你不需要记十个断点。手机、平板、电脑，三个够了。多了你也维护但是来。

四、别把文字缩成蚂蚁

响应式不是把电脑版等比缩小。字缩到12像素以下，手机上拿着看，眼睛疼。

正文至少16像素。行高1.5以上。段落之间留点空。字少一点，说清楚就行。没人愿意在手机上读小作文。

五、导航栏是最大的坑

电脑上的横向导航，到手机上放不下。别硬塞。

三条路：要么变成汉堡菜单，要么变成底部选项卡，要么直接删。对，删。很多网站导航十几个链接，用户根本用不上。留三四个最重要的，其他收起来。删东西不丢人，用户找不到东西才丢人。

六、表格和代码块单独处理

表格在手机上最容易炸。加个外层容器，让它横向滚动：

css
.table-wrap { overflow-x: auto; }

别指望表格在手机上完整显示，不现实。能滑动看就行。

代码块同理。不要自动换行，换完没法看。横向滚，加个滚动条提示，够了。

七、真机测试，别老用浏览器缩窗口

浏览器拉窄，跟真手机是两回事。真机有触摸、有安全区域、有地址栏吃高度。

至少测三台：一台小屏安卓，一台大屏iPhone，一台老iPad。别用模拟器，模拟器永远比真机好看。真机上出问题，才是真问题。

八、最后呢一句

响应式不是技术活，是取舍活。你不可能把所有东西都塞进小屏幕。想清楚什么必须留，什么可以扔。扔得干脆，网站就好用。

代码写少点，测试做多点。完事。