先看效果：同一套代码，电脑上三栏，手机上单栏，图片自动缩放罢了。这就是响应式。别想复杂，核心就三件事：视口、断点、弹性布局。

第一步，加视口标签。打开HTML的head，写上一行：``。没这行，手机浏览器会把页面当电脑网页缩着显示，字小得看不清。加上它，页面宽度就跟手机屏幕对齐了。

第二步，别写死宽度。新手常犯的错：`width: 960px`。手机屏幕才375像素宽，直接溢出。改成`max-width: 960px; width: 100%`。图片也一样，加`img { max-width: 100%; height: auto; }`，图片就永远不撑破容器。

第三步，用媒体查询设断点。断点就是“宽度到多少时换布局”。别学框架搞一堆断点，普通人两三个足够。比如：

css
@media (max-width: 768px) {


.sidebar { display: none; }


.main { width: 100%; }


}

意思：屏幕小于768像素时，侧边栏藏起来，主占满整行。平板和手机都能照顾到。

第四步，布局用flex或grid，别用float。float做响应式很麻烦，要清浮动、算百分比。flex一行代码搞定：`display: flex; flex-wrap: wrap;`。子元素设`flex: 1 1 300px`，意思是“最小300像素宽，能伸能缩，放不下就换行”。电脑上并排三个，手机上自动堆成一列。

第五步，字号也弹性。别全用px。正文用`font-size: 1rem`（约16px），用`clamp(1.5rem, 4vw, 2.5rem)`。这句的意思是：最小1.5rem，最大2.5rem，中间跟着屏幕宽度走。手机不挤，电脑不空。

最后，真机测试。浏览器开发者工具里点手机图标能模拟，但别全信。拿自己手机打开看看，手指点按钮够不够大，文字读着累不累。按钮最小44像素高，这是拇指能舒服点到的底线。

还有个坑：别忘了横屏。有人竖屏好好的，一转横屏被切。测试时转一下手机，看有没有溢出。有的话检查是不是哪个元素写了固定高度。

整套下来不用框架，几十行CSS就够。响应式不是高科技，就是别跟屏幕较劲。屏幕窄了就让竖着排，屏幕宽了就横着摆。顺着来，页面自然好看。