做网站先别急着写代码。打开电脑，把浏览器窗口拉窄，再拉宽。你看到的问题，就是用户会遇到的。

第一步，加一行标签。

html

这行让手机知道自己是手机，别按电脑宽度硬缩放。漏了它，后面全白搭。

第二步，别用固定宽度。

`width: 960px` 这种写法扔了。换成百分比或者`max-width`。图片加一句`max-width: 100%; height: auto;`，它就不会撑破屏幕。

第三步，确定断点。

别背一堆设备尺寸。看你的——哪里挤了，哪里就设断点。一般先设768px和1024px。写媒体查询：

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


.nav { flex-direction: column; }


}

导航竖起来，大屏两栏的小屏改一栏。就这个思路，说了算，不是手机说了算。

第四步，用弹性布局。

`flex`和`grid`比`float`省心。一行卡片用`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))`，屏幕窄了自动换行，不用写一堆查询。

第五步，字体和按钮别太小。

手机上正文至少16px。按钮高度44px左右，手指点得准。链接之间留点空，别让人误触。

第六步，图片按需加载。

大图在手机上下载慢。用``给不同屏宽准备不同尺寸，或者干脆用`loading="lazy"`让图片滚到眼前再加载。

第七步，真机测试。

浏览器开发者工具里那个手机图标，能看个大概。但真手机拿起来，手指划一划，才知道哪里不对。至少试一台小屏安卓和一台iPhone。

末了说提醒一句：响应式不是加几个媒体查询就完事。先把手机版理顺，再往上放大。优先，布局跟着走，这站才算立住了。