做网站，先别急着写代码。打开手机，看看你现在的网站。如果字小得看不清，图片撑出屏幕，按钮点不到——这网站基本废了。响应式不是加分项，是及格线。

动手前想清楚三件事：谁在看、在哪看、看什么。用户多半用手机，那就先做手机版。别从电脑版往下缩，那是给自己挖坑。

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

没这行，手机浏览器会假装自己是电脑，把页面缩成蚂蚁。加了这行，页面才按手机屏幕宽度来。

第二步，别用固定宽度。把所有px宽度换成百分比或者max-width。容器写成：

.container { width: 100%; max-width: 1200px; margin: 0 auto; }

大屏上最宽1200，小屏上自动缩，两边不留白。

第三步，图片要听话。给图片加：

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

这样图片永远不会撑破容器。

第四步，用媒体查询调布局。这是响应式的核心。先写手机样式，再用@media往上加：

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

手机一列，平板两列，电脑三列。别反过来写，改起来会让你疯掉。

第五步，字体别写死。用rem或者vw。小屏用1rem，大屏加一个媒体查询调到1.2rem。别让用户眯眼或者大得像标语。

第六步，导航要能收。手机屏幕上，菜单塞不下就藏进汉堡按钮。点击弹出全屏菜单，比硬挤在一行强一百倍。别整复杂动画，能点能关就行。

第七步，测试。别只看自己手机。Chrome开发者工具里切设备，从320px到1920px挨个过。看两件事：有没有横向滚动条，按钮手指点不点得到。横向滚动条一出现，说明有元素超宽，逐个排查。

末了说，响应式不是一次做完的事。用户屏幕千奇百怪，做完基础版，拿真机试。老人机、平板、折叠屏，能借到的都用上。

记住一句话：手机能舒服看完的网站，电脑上不会差。反过来不一定成立。