做网站，先别急着写代码。打开电脑，把浏览器窗口拉窄。再拉窄。如果网页跟着变、不乱跑、不用左右划，这就是响应式。就这么简单。

很多新手一上来就学框架。没必要。先搞懂三件事：宽度用百分比、图片别定死、字体看屏幕调。

宽度别用固定像素。比如`width: 960px`，手机屏幕才375像素宽，直接崩。改成`width: 100%`，或者`max-width: 960px`，再加个`margin: 0 auto`居中。这样大屏不撑满，小屏不溢出。

图片也一样。给`img`加一句`max-width: 100%; height: auto;`。图片会缩，不会把手机屏幕撑出横向滚动条。别小看这一行，十个新手九个栽在这。

然后是布局。最简单的方法：写两套样式。电脑上一行显示三列，手机上一行显示一列。怎么做？用媒体查询。

css
.box { width: 33.33%; float: left; }


@media (max-width: 600px) {


.box { width: 100%; float: none; }


}

意思是：屏幕宽过600像素，每个盒子占三分之一；窄于600像素，每个盒子占满一行。就这么直白。

600这个数不用纠结。常见断点是768、992、1200。你看着自己的网站在哪个宽度开始变丑，就在那里切断点。工具不用多，浏览器开发者工具按F12，拉一拉窗口，一目了然。

字体也得管。电脑上16像素正好，手机上可能偏小。媒体查询里加一句`body { font-size: 14px; }`或者干脆用`font-size: 1rem`配合根元素调整。更省事的办法：`font-size: clamp(14px, 2vw, 18px);`——屏幕窄时14像素，宽时18像素，中间自动过渡。一行搞定，不用写断点。

导航栏最容易翻车。电脑上横排，手机上挤成一坨。要么改成汉堡菜单，要么直接堆叠。新手建议先堆叠：

css
nav a { display: block; padding: 12px; }

手机上每个链接占一整行，手指点得准，不误触。电脑上再用媒体查询改回`inline-block`。

测试别只在自己手机上试。拉浏览器窗口，从宽到窄慢慢拖，盯着看哪里裂开。常见的裂缝：卡片重叠、文字溢出、按钮点不到。哪个宽度出问题，就加断点修那里。

还有说个坑：别用`position: fixed`做侧边栏。手机屏幕小，固定元素会盖住，用户烦。真要用，小屏上改成`static`。

响应式不是什么高深技术。核心就一句话：别把尺寸写死。用百分比、用`max-width`、用媒体查询。三板斧抡完，九成网站都能适配。

动手比看教程管用。随便写个三栏页面，拉窄窗口，看它怎么变。修三次，你就懂了。