做网站，先别急着写代码。打开电脑，把浏览器窗口拉窄，再拉宽。很多网站这时候就露馅了——字挤成一团，图片跑出边框，按钮点不着。响应式要解决的就是这个。

第一步，加一行代码。在网页头部写上 ``。不加这行，手机浏览器会把页面当电脑版缩小显示，字小得要用放大镜。加了，页面才知道自己有多宽。

第二步，别写死宽度。新手爱写 `width: 960px`，看着整齐，手机上一屏放不下。改成百分比，比如 `width: 100%`，或者用 `max-width` 限制上限。图片加一句 `max-width: 100%`，让它自己缩，别撑破布局。

第三步，用媒体查询给不同屏幕换衣服。写 `@media (max-width: 768px) { ... }`，里面的样式只在窄屏生效。比如电脑上导航横排，手机上改成竖排。断点不用多，768、1024 这两个常用值先记着。

第四步，布局用 flex 或 grid。以前用浮动，清浮动能烦死人。现在给父元素一句 `display: flex`，子元素自动排队。屏幕窄了，加 `flex-wrap: wrap`，排不下的自己换行。grid 更省事，一句 `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))`，卡片自动调整列数，一行代码管到底。

第五步，字体和按钮别抠门。手机上看不清 12px 的字，正文至少 16px。按钮留足点按空间，高度别低于 44px，手指没那么精细。

第六步，测试。别只看自己手机。浏览器开发者工具里有设备模拟，挨个点一遍。更靠谱的是拿真手机试，安卓苹果各来一台。重点看三样：字能不能看清，按钮能不能点着，图片有没有变形。

最后一点说个坑。别为了响应式把桌面版做得花里胡哨，手机版砍得只剩骨架。一样，只是排法不同。先写手机版，再往宽了加东西，比反过来省事得多。

响应式不玄乎。就是让网页像水一样，倒进什么容器就什么形状。上面六步走完，基本能交差。剩下的，边做边调。