做网站先想清楚一件事：用户拿什么看？以前只管电脑，现在手机流量占了大头呗。你花心思做的页面，在手机上排版乱成一锅粥，用户三秒就关。响应式就是解决这个的——同一套代码，屏幕大就铺开，屏幕小就收拢。

第一步，别急着写样式，先把这行加进 head：

没这行，手机浏览器会假装自己是台一千多像素宽的电脑，把页面缩成蚂蚁，谁看谁跑。加了它，页面宽度才跟屏幕对齐。

第二步，把“固定”扔掉。以前写 width: 960px，现在换成百分比或者 max-width。图片加一句 max-width: 100%，它就不会撑破小屏幕。这一条改完，很多页面已经能看了。

第三步，用断点。断点就是“到多宽换一套排法”。常见的是 768px 和 1024px 两个坎。

@media (max-width: 768px) {

.nav { display: none; }

.side { width: 100%; }

}

意思很直白：屏幕窄到 768 以下，导航先藏起来，侧栏改成整行。别设太多断点，两三个够用，多了自己都记不清哪条管哪块。

第四步，管住字和按钮。手机上手指粗，按钮至少 44px 高，链接之间留空隙，不然点一个碰俩。正文字号别小于 16px，行高 1.5 左右，读着不累。

第五步，拿真手机试。浏览器开发者工具里的手机模拟只是参考，真机的字体、滚动、点击手感都不一样。拿自己的手机打开，从首页点到内页，看哪儿挤、哪儿点不着，比看代码快得多。

最后一点提醒一句：响应式不是“做完再适配”，是从第一行 CSS 就按流式写。中途返工最费劲。先让窄屏能用，再往宽了调，这个顺序不容易乱。