先别急着写代码。打开你常逛的网站，把浏览器窗口拉窄，再拉宽。如果会自己调整、不挤成一团、不用左右拖，这就是响应式。

做响应式，第一步是加一行代码。在网页的head里放这个：

html

没这行，手机浏览器会假装自己是台电脑，把页面缩得蚂蚁那么小。加了，页面才知道自己该多宽。

第二步，别用固定宽度。过去写 `width: 960px`，现在换 `width: 100%` 或 `max-width: 1200px`。图片也一样，加 `max-width: 100%; height: auto;`，它就不会撑破屏幕。

第三步，用媒体查询。简单说，就是“屏幕小于多少时，换个样子”。比如：

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


.sidebar { display: none; }


.nav { flex-direction: column; }


}

屏幕窄了，侧栏藏起来，导航从横排变竖排。就这么直接。

第四步，布局用flex或grid。flex适合一行排几个块，窄屏自动换行，一句 `flex-wrap: wrap;` 就够。grid适合整页分栏，两栏变一栏就是改一个数字的事。别再用float硬拼了，那是旧时代的拐杖。

第五步，字体和按钮别太小。手机上正文至少16px，按钮高度44px以上，手指点得准。别让用户放大页面才能点链接。

第六步，测试。浏览器按F12，点那个手机图标，选iPhone或安卓尺寸看效果。但真正的测试是拿真手机打开。电脑模拟器骗得了你，骗不了手指。

常见坑说三个。一是忘了图片设max-width，小屏幕上图片横着跑。二是媒体查询断点抄别人的，1400、1200、768、480全上一遍。断点该按你自己的定：文字挤了、布局乱了，那就是断点，别硬套。三是桌上摆得好看，手机上一团糟。每改完一段，拉窄窗口看一眼。

响应式不是高科技。核心就一句话：别把尺寸写死，让页面跟着屏幕走。加好viewport，宽度用百分比，图片会缩，布局会折，字体别抠门。做完拿手机打开，能看、能点、不横拖，就成了。