先看一个事实：现在超过一半的流量来自手机。你做的网站如果在手机上打开要放大缩小、按钮点不到，用户三秒就跑了。响应式网站就是让同一套页面自动适配手机、平板、电脑的屏幕。怎么做？往下看。

第一步，写HTML之前先想清楚结构。别一上来就摆布局。把页面拆成几块：头部、导航、区、侧栏、页脚。每块在手机上长什么样，在电脑上长什么样，先在纸上画两笔。这步省不得，结构乱了后面全是补丁。

第二步，加这行代码：

html

没有它，手机浏览器会假装自己是电脑屏，把页面缩成蚂蚁。加上它，页面才按真实宽度显示。

第三步，别写死宽度。用百分比和`max-width`代替固定像素。比如：

css
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

图片也一样，`max-width: 100%`，高度自动。这样小屏上不会横向滚动。

第四步，用媒体查询做断点。常见断点：768px（平板）、480px（手机）。写法：

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


.nav { flex-direction: column; }


}

断点不是越多越好，两三个就够。别给每个设备写一套样式，那是自找麻烦。

第五步，导航栏在手机上别硬塞。桌面端横向排开，手机上收成汉堡按钮。用纯CSS也能做，加个checkbox控制展开。或者用几行JS，简单可靠。

第六步，字体和点击区域。手机上字号别小于16px，否则用户得眯眼。按钮最小44px见方，手指点得准。这俩细节做不好，别的都白搭。

第七步，真机测试。浏览器开发者工具能模拟，但不算数。拿自己的手机打开看，用不同尺寸的平板试。哪里溢出、哪里按钮挤在一起，一眼就看见。

末了说提醒一句：响应式不是把桌面版硬压成手机版。手机上该藏的藏，该换顺序的换顺序。优先级不同，布局就得跟着变。

按这七步走，一套代码管所有屏幕。不复杂，动手就行。