先看效果：电脑上三栏并排，手机上一栏堆叠呢。同一个页面，不用做两套。

第一步，加一行代码。在HTML的head里写：

html

没这行，手机上页面会缩成蚂蚁大小。有了它，浏览器才知道按屏幕宽度来排版。

第二步，别写死宽度。新手常见错误是给容器定个960px。手机屏才375px宽，直接溢出。改成百分比或者max-width：

css
.container { width: 90%; max-width: 1100px; margin: 0 auto; }

意思是：最多1100px，小了就占九成，居中。

第三步，图片要听话：

css
img { max-width: 100%; height: auto; }

图片永远不会撑破容器，高度自动跟着比例走。

第四步，用媒体查询换布局。这是响应式的核心。先在CSS里写好手机版（单栏），再用查询给大屏加规则：

css
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }


@media (min-width: 768px) {


.cards { grid-template-columns: repeat(3, 1fr); }


}

小于768px是一栏，大于就三栏。断点不用多，768px和1200px够用。

第五步，字号和间距别钉死。用rem，跟着用户设置走。字太小在手机上读着费劲。

第六步，导航要变形。手机屏放不下一排菜单，收进汉堡按钮。先做能用的：小屏时菜单竖着排，大屏横着排。汉堡交互可以后面加。

最后，真机测试。浏览器开发者工具里有个手机图标，点开能模拟各种尺寸。但模拟不等于真机，拿自己手机打开看看，手指点得准不准，字挤不挤。

记住三条：别写死像素宽度、图片加max-width、媒体查询管布局。剩下的就是调细节。