做网站先想清楚一件事：用户用什么看？手机、平板、电脑，屏幕大小差得远啦。响应式就是让同一套代码自动适配，不用给手机单独做个站。

第一步，HTML里加一行：``。没这行，手机浏览器会把页面当成电脑版缩小，字小得看不清。

第二步，别写死宽度。`width: 960px`这种写法在手机上会溢出。换成百分比或`max-width`。图片加`max-width: 100%; height: auto;`，让它跟着容器缩。

第三步，用媒体查询。这是响应式的核心。比如：

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


.nav { flex-direction: column; }


}

意思是屏幕窄于768像素时，导航从横排变竖排。断点不用太多，两三个够用：手机、平板、桌面。

第四步，布局用Flexbox或Grid。以前用float排版，现在没必要。Flexbox做一维排列简单，Grid做二维网格方便。两者都天然支持伸缩，比手算宽度省事。

第五步，字体和间距也要适配。在手机上太大就挤爆了。用`clamp()`一行搞定：`font-size: clamp(1.2rem, 4vw, 2rem);`。最小1.2rem，最大2rem，中间随屏幕宽变化。

第六步，测试。别只在自己电脑上缩窗口。用浏览器开发者工具的设备模拟，再拿真手机看一遍。真机才能发现触摸区域太小、横向滚动条冒出来这类问题。

几个常见坑：表格太宽会撑破布局，给小屏幕加横向滚动容器；视频用`width:100%`；导航在手机上别硬塞，折叠成汉堡菜单更实际。

响应式不是玄学，就是让元素会伸缩、会换行、会隐藏。写CSS时多问一句：屏幕变窄一半，这块会怎样？想明白了，站就稳了。