打开你手机看看现在的网页，再打开电脑看看同一个页面哟。如果排版没乱、字没小到看不清、按钮没挤在一起，那它就是响应式网站。听起来挺玄乎，其实就一句话：网页能根据屏幕大小自己调整。

很多人做网页习惯写死宽度，比如 `width: 960px`。在电脑上好看，一到手机上就得左右滑，体验极差。响应式的核心是让宽度变成弹性的。把固定宽度改成百分比或者用 `max-width`，元素就能跟着屏幕伸缩。

第一步，在 head 里加一行代码：

html

这行代码告诉手机浏览器，别自作主张把页面缩小，按设备实际宽度来。不加这行，后面全白搭。

第二步，别用绝对单位。字号用 `rem` 或者 `em`，宽度用 `%`、`vw`。图片加一句 `max-width: 100%; height: auto;`，大图就不会撑破手机屏幕。

第三步，用媒体查询做断点。说白了就是“屏幕小于多少像素时，换一套排版”。比如三栏变一栏：

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


.column { width: 100%; }


}

断点别设太多，两三个就够。常见的是 768px 管平板，480px 管手机。先做手机版再往大屏扩，比反过来容易得多。

第四步，导航栏单独处理。桌面上的横向菜单到了手机上肯定放不下。简单做法是媒体查询触发时把菜单项改成竖排，或者藏进一个“菜单”按钮里。不用一上来就搞复杂交互，能点开能关上就行。

第五步，测试。别只看自己手机。浏览器开发者工具里有设备模拟，挨个尺寸拖一遍，看哪儿裂了补哪儿。重点看图片、表格、长。表格在手机上最容易崩，给它外面套个 `overflow-x: auto` 的容器，至少能横滑。

还有几个坑要躲开。别用 `height: 100vh` 做全屏区块，手机地址栏一缩一放就会跳。别把字号设太小，手机上正文低于 16px 就费劲。视频用 `iframe` 的话，外面包个容器控制宽高比。

响应式不是什么高深技术，就是换位思考：用户可能在巴掌大的屏幕上戳你的页面。少用固定值，多用相对单位，加几个断点，测几轮。一个下午能搞定的事，别拖成一周。动手改第一个百分比的时候，就已经开始了。