做网站，先别急着写代码啊。问自己一句：用户拿手机打开你的站，会不会想摔手机？字小得看不清，按钮点不着，图片撑出屏幕。响应式就是解决这事的。

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

``

这行告诉浏览器：别自作主张缩放，按设备宽度来。没这行，后面全白搭。

第二步，别写死宽度。用百分比，别用固定像素。比如：

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

图片再大也不会撑破手机屏。布局用flex或grid，别用float硬拼。flex简单：父容器加`display: flex; flex-wrap: wrap;`，子元素设个`flex: 1 1 300px;`，窄屏自动换行。

第三步，媒体查询。这是响应式的开关。写法：

`@media (max-width: 768px) { ... }`

括号里放窄屏时的样式。比如桌面端三栏，手机端改一栏。别设太多断点，768px和480px足够。记住：先写手机样式，再慢慢加宽屏规则，这叫移动优先。

第四步，字体和按钮别太小。手机屏上，正文至少16px。按钮高度低于44px，手指点不准。间距留够，别挤成一团。

第五步，测试。别只缩浏览器窗口。用真手机打开，或者开发者工具里的设备模拟。重点看三件事：有没有横向滚动条？文字会不会溢出？按钮好不好点？

最后呢说个坑。很多人忘了表格和视频。视频加`width: 100%; height: auto;`就行。表格麻烦点，手机端要么横滑，要么转成卡片式。别偷懒。

响应式不难，难在耐心。改一处，测一处。手机能看了，再管平板。一步一步来，比一次全改强。