打开你手机看看那些网站呢。字小得要用两根手指放大，按钮挤成一团，横向还能拖出屏幕。这就是没做响应式的后果。

响应式说白了就一件事：让网页自己适应屏幕。电脑上三栏，手机上变一栏。不用单独做个手机版，一个页面全搞定。

先改HTML头部。加一行meta viewport，少这行后面全白搭：

这行告诉浏览器：按设备实际宽度来，别自作主张缩放。

然后扔掉固定像素。以前写`width: 960px`，现在换成百分比或`max-width`。图片加一句`max-width: 100%; height: auto;`，它就不会撑破容器。

布局用Flexbox或Grid。老式的float排版容易塌，Flex两行代码就居中，Grid分栏最省事。比如两栏变一栏，媒体查询里把`grid-template-columns`从`1fr 1fr`改成`1fr`就行。

媒体查询是核心工具。写在CSS末尾：

@media (max-width: 768px) {
.sidebar { display: none; }


.content { width: 100%; }


}

断点别设太多。手机一个（768px以下），平板一个（1024px以下），够用。追着每个机型调，你会疯。

字号也别写死。用`clamp(1.5rem, 4vw, 2.5rem)`，屏幕小字就小，屏幕大字就大，中间平滑过渡。

测试方法很简单。浏览器按F12，点那个手机图标，拖边框看变化。真机也要试，模拟器骗人的时候不少。

还有记住：响应式不是做完就完事。加个新组件，回头拖一遍窗口，看看有没有崩。习惯就好。