打开电脑做好的网页，用手机一看，字小得跟蚂蚁似的，还得两根手指放大，来回拖着看。用户早跑了。响应式就是解决这事的：一个网页，电脑、平板、手机打开都顺眼。

别急着写代码，先记住一件事：手机屏幕窄，电脑屏幕宽。东西不能死板，得会自己挪位置。

第一步，在网页头部加一行代码。这行是告诉手机浏览器：“别自作主张缩放，按我写的来。”少了它，后面全白搭。

html

第二步，把“固定宽度”全改掉。以前爱写 `width: 960px`，现在换成百分比或者 `max-width`。比如图片，写 `max-width: 100%`，它就会缩着走，不会撑破屏幕。

第三步，布局别再用写死的浮动。用 flex 或 grid，顺手。

容器这么写：

css
.container {


display: flex;


flex-wrap: wrap;


}

`flex-wrap: wrap` 是关键。屏幕不够宽，子元素自动换行，不用你操心。

第四步，用媒体查询做分界线。说到底就一句话：“屏幕小于多少，换成另一套样式。”

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


.container { flex-direction: column; }


}

意思是屏幕小于 768 像素时，横排变竖排。手机上看着就舒服了。

第五步，字号也得跟着变。电脑上 16px 刚好的字，手机上照样 16px，但别在小屏上堆大。用 `clamp()` 一行搞定：

css
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }

屏幕窄就小点，宽就大点，中间自动过渡。

最后一点，测试别偷懒。电脑上把浏览器窗口拖窄，看布局崩不崩。再拿真手机打开看看。开发者工具里的手机模式能凑合看，但真机最准。

记住几个原则：能用百分比就别写死像素；图片加 `max-width: 100%`；少用绝对定位，它不跟着屏幕走；按钮和链接在手机上别太小，手指点不着。

做完这几步，你的网站就能自己适应屏幕了。不用搞两套代码，不用天天修，维护也省心。