先写手机版，再管电脑。顺序反了，后面全是补丁。

打开编辑器，新建 HTML 文件。头部加一行：``。没这行，手机浏览器会假装自己是电脑，把页面缩成蚂蚁大小。

布局别用固定宽度。`width: 100%` 是好朋友，`width: 960px` 是敌人。图片加 `max-width: 100%; height: auto;`，它自己会缩。

导航栏是第一个坎。电脑上横着排，手机上塞不下。用媒体查询：

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


.nav { flex-direction: column; }


}

意思是：屏幕窄过 768 像素，导航竖起来。768 不是圣旨，按你定。挤了就断，别死记数字。

字体也别写死。`font-size: 16px` 在手机上凑合，大屏上像蚂蚁。试试 `font-size: calc(14px + 0.5vw)`，随屏幕微调。不追求精确，够顺眼就行。

多列布局用 flex 或 grid。别用 float，那是上个时代的拐杖。一个容器，`display: flex; flex-wrap: wrap;`，子元素给个 `flex: 1 1 300px`。意思是最小 300 像素，空间多了就分，不够就换行。三行 CSS，顶半小时调宽度。

测试别只拖浏览器窗口。按 F12，点那个手机图标，切几个机型看看。真机更靠谱，拿自己手机连同一 WiFi，输电脑 IP 加端口，直接看。

常见坑：横向滚动条。多半是某个元素超宽了。加 `* { box-sizing: border-box; }`，再检查有没有写死 `width: 1200px` 的祖宗。

还有，别给每个断点写一套 CSS。先写一套能伸缩的，实在不行再加两三个媒体查询。断点越多，维护越像拆弹。

最后一点，响应式不是像素级对齐。手机竖屏、平板横屏、带鱼屏显示器，每个尺寸都完美？不现实。核心是：字能读，按钮能点，图不糊，不横滚。达标就收工。

写完在手机上和电脑上各刷三遍。哪别扭改哪。工具是死的，眼睛是活的。