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

第一步，HTML里加一行viewport声明。少了这行，手机浏览器会把页面缩成缩略图，字小得看不清。代码很简单：``。这行必须放在head里。

第二步，布局别用固定像素。宽度写100%、50%这类百分比，或者用flexbox、grid。老办法是写死960px宽，手机上一横屏就出事。现在直接用flex，一行几个卡片自己会换行。grid更适合整体大框架，两栏三栏随屏幕变。

第三步，图片要灵活。给img加`max-width:100%;height:auto`，图片就不会撑破容器。大图用srcset提供几个尺寸，浏览器自己挑合适的下载，省流量也快。

第四步，媒体查询。这是响应式的核心工具。写法是`@media (max-width:768px){...}`，意思是屏幕窄于768px时生效。里面一般改布局方向——横排变竖排，侧边栏收起来。断点别设太多，两三个够用。常见的是768px和1024px。

第五步，字体和间距也随屏幕调。手机上字号16px起，别小于14px。行高1.5左右。按钮和链接的点击区域至少44px高，手指点得准。内边距用rem或百分比，别写死。

第六步，测试。浏览器开发者工具里有设备模拟，切到iPhone、iPad看看。但模拟不保险，真机开一遍最稳。重点看三处：有没有横向滚动条、文字会不会挤成一团、按钮好不好点。

最后呢提醒一句，别过度设计。有人的页面在手机端藏掉一半，用户找不到关键信息。响应式是让更好读，不是变魔术。先保证功能完整，再谈好看。

按这个顺序做：viewport→弹性布局→图片适配→媒体查询→细节微调→真机测试。一个下午能搭出基本框架。