做网站先想清楚一件事：用户可能用手机、平板、电脑打开你的页面。三种屏幕宽度差好几倍。响应式就是让同一套代码自动适配，不用做三个网站。

第一步，加viewport标签。这行代码放head里：

没它手机浏览器会把页面缩成缩略图，字小得看不清。

第二步，别写死宽度。用百分比或者fr单位，不用px。比如：

.container { width: 90%; max-width: 1200px; margin: 0 auto; }

宽度跟着屏幕走，但别超过1200像素，大屏上不至于拉得太开。

第三步，图片要听话。

img { max-width: 100%; height: auto; }

图片最宽不超过容器，高度自动等比缩放。这行CSS解决大半溢出问题。

第四步，用媒体查询换布局。手机单列，电脑多列：

.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 768px) {

.grid { grid-template-columns: 1fr 1fr; }

}

窄屏一列堆叠，宽屏两列并排。断点别设太多，768px和1024px两个够用。设多了维护起来头疼。

第五步，字体和按钮别太小。手机上正文至少16px，按钮高度44px左右。手指比鼠标粗，点不中很烦。用rem做单位，改根字号全站跟着变。

第六步，导航栏处理。手机上藏进汉堡菜单，电脑上横排展示。别想着用hover效果，触屏没有悬停这回事。点击区域要够大。

第七步，测试。浏览器开发者工具里有个设备切换按钮，选几个常见尺寸拖一拖。真机也要试，模拟器骗人的时候不少。重点看三处：文字有没有溢出、图片有没有变形、按钮好不好点。

最后呢说个常犯的错：只做宽度适配，忘了横屏。手机横过来宽度变了，布局得跟着调。媒体查询里加个orientation判断，或者干脆用min-width兜底。

响应式不复杂，核心就一句话：别假设用户屏幕多大。流式布局打底，媒体查询补刀，图片和字体管住，做完真机点一遍。齐活。