做网站，先别急着写代码。想清楚一件事：用户拿什么看你的网站？手机、平板、电脑，尺寸从四寸到三十寸。以前做两套网站，手机版和电脑版，维护起来累死人。现在不用了，一套代码搞定，这就是响应式。

先从最基础的开始。HTML里加一行``。这行代码告诉手机浏览器：别自作主张缩放，按设备实际宽度来。不加这行，手机上看到的就是缩小版的电脑网页，字小得要用放大镜。

接下来是布局。别再用固定像素宽度了，`width: 960px`这种写法在手机上直接溢出。换成百分比或者`max-width`。比如`.container { max-width: 1200px; width: 100%; margin: 0 auto; }`。这样大屏幕不撑得太宽，小屏幕自动缩。

图片最容易出问题。``标签加个`max-width: 100%; height: auto;`。图片会跟着容器缩放，不会撑破布局。但注意，别用超大图然后靠CSS缩小，手机加载慢。用``标签或者`srcset`给不同屏幕配不同尺寸的图，省流量。

字体也别写死。`font-size: 16px`在手机上可能还行，但`32px`就太大了。用`rem`或者`vw`。`rem`基于根元素字体大小，改一处全变。`vw`是视口宽度百分比，`font-size: 4vw`意味着字体大小随屏幕宽度变化。

媒体查询是响应式的核心。别一上来就写一堆断点。先做移动端样式，然后逐步加宽屏幕才需要调整的地方。这叫移动优先。比如：

css
/ 默认手机样式 /


.card { width: 100%; }


/ 平板以上 /


@media (min-width: 768px) {


.card { width: 50%; }


}


/ 桌面 /


@media (min-width: 1024px) {


.card { width: 33.33%; }


}

断点别照搬Bootstrap那套。看你的在哪个宽度开始难看，就在那里打断点。说了算，不是设备说了算。

导航栏是个坎。电脑上横排，手机上塞不下。常见做法：小屏幕藏起来，放个汉堡按钮。点开变成竖排菜单。CSS用`display: none`和`display: block`切换，加个过渡动画别太生硬。别搞太花哨，用户点得开、找得到链接就行。

表格和长代码块容易溢出。给它们套个`overflow-x: auto`的容器，横向滚动，别让整个页面跟着撑宽。

测试别只看自己手机。浏览器开发者工具有设备模拟，但真机测试不能省。不同手机默认字体大小不一样，安卓和iOS的渲染也有差异。拿几个旧手机试试，比模拟器靠谱。

最后呢，别追求完美。响应式不是像素级对齐，是让在任何屏幕上都能舒服地读。先保证能用，再打磨细节。网站是给人看的，不是给截图比赛评委看的。