打开电脑写代码，先别急着画布局。问自己一句：用户拿手机看这个页面，会不会骂人？

响应式网站就一个核心：同一套代码，屏幕大就横着排，屏幕小就竖着摞。没那么多玄学。

第一步，加一行标签。

在HTML的head里写上：

html

不加这行，手机浏览器会把页面假装成980px宽再缩小，字小得拿放大镜都看不清。加了，页面才按手机真实宽度来。

第二步，别写死宽度。

新手最爱写`width: 1200px`。手机屏幕才375px，直接溢出，横向滚动条就出来了。改成`max-width: 1200px; width: 100%;`，大屏不超宽，小屏自动缩。图片也一样，加一句`img { max-width: 100%; height: auto; }`，图片跟着容器走，不撑破。

第三步，用媒体查询切布局。

这是响应式的主力。想让三栏在手机上变一栏，就这么写：

css
.container { display: flex; flex-wrap: wrap; }


.item { width: 33.33%; }


@media (max-width: 768px) {


.item { width: 100%; }


}

意思很直白：屏幕宽过768px，一行三个；窄了，每个占满一行。断点选768px是因为平板竖屏差不多在这，手机基本都在下面。断点不用多，两三个够用，多了自己都记不住。

第四步，字体和间距跟着缩放。

桌面16px的字到手机上不算大，但写死36px就挤了。用`clamp()`一句话搞定：

css
h1 { font-size: clamp(24px, 5vw, 36px); }

最小24px，最大36px，中间按屏幕宽度5%走。间距同理，少用固定px，多用百分比或rem。

第五步，真机上看，别只拖窗口。

浏览器拖窄了不算数。手机上摸一摸：按钮够不够大？手指点得到吗？至少44px见方。导航栏挤不挤？挤就收进汉堡菜单。表格横着滚会不会难受？会就换成卡片式排列。

还有，别追求完美。

响应式不是一次写完的。先让手机能正常看，再调平板，还有补大屏的细节。上线后用真手机多刷几遍，哪个页面歪了点哪个。工具是死的，眼睛是活的。