做网站，先别想太复杂。你只需要记住一件事：用户用什么设备打开，你的页面就得在那个设备上看着舒服。手机、平板、笔记本，屏幕大小差很多。响应式就是让一套代码自动适应这些屏幕。

第一步，加一行代码。在网页的head里写：

没有这行，手机浏览器会把页面当成电脑版缩小显示，字小得没法看。这行告诉浏览器：按设备实际宽度来。

第二步，别用固定宽度。比如别写width: 960px。改成width: 100%或者max-width: 960px。图片也一样，加一句img { max-width: 100%; height: auto; }。图片就不会撑破屏幕。

第三步，用媒体查询。这是响应式的核心。简单说就是：屏幕窄了，换一套样式。比如：

@media (max-width: 768px) {

.nav { display: block; }

.sidebar { display: none; }

}

意思很直白：屏幕宽度小于768像素时，导航改成竖排，侧边栏藏起来。手机上就别硬塞侧边栏了，没人看。

第四步，布局用flex或者grid。别再用float加clearfix那套老办法，麻烦还容易乱。flex做一维排列，grid做二维网格。举个例子，三栏布局在手机上变成一栏：

.container { display: grid; grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {

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

}

两行代码搞定。桌面三列，手机一列。

第五步，字体别写死。用rem或者vw。比如body { font-size: 16px; }，用1.5rem。屏幕小的时候，整体缩放更自然。别在手机上用24px的大，挤得没地方放正文。

第六步，触屏友好。按钮和链接别太小。手指点不准。最小点击区域建议44像素见方。间距拉开一点，别让用户误触。

第七步，测试。做完别只看自己电脑。浏览器开发者工具里有设备模拟，挨个试iPhone SE、iPad、常见安卓机。真机也要试。模拟器看不出真实触摸手感。

最后呢，别追求一次完美。先让在小屏幕上能读、能点、不横向滚动。这三条做到了，再调细节。响应式不是炫技，是让用户不骂你。