先说结论：响应式网站就是一套代码，手机、平板、电脑打开都正常显示，不用单独做手机版呗。

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

html

这行不加，手机上字小得跟蚂蚁一样，用户得拿放大镜看。加上它，页面宽度就跟设备屏幕一样，后面才好办。

第二步，别把宽度写死。新手最爱犯的错是给盒子设固定像素宽度，比如width: 960px。手机上屏幕才375px宽，放不下，直接横向滚动条拉到底。改成百分比，或者用max-width。图片也一样，加一句max-width: 100%，图片就自动缩，不会撑破版面。

第三步，用媒体查询。这是响应式的核心。很简单，就是问一句“屏幕多大”，然后给不同答案：

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


.container { flex-direction: column; }


}

意思是屏幕小于768px时，横排改竖排。手机上竖着排才看得清。媒体查询写几个断点就够，常用的是768px（手机和电脑的分界）和1024px（平板）。别设七八个，记不住也维护不了。

第四步，用弹性布局。Flexbox和Grid是现在的标准，少用float。flex-wrap: wrap让放不下时自动换行，手机上特别省事。导航栏几行代码就能变成汉堡菜单，或者干脆竖排堆叠。

第五步，手机上动手测。开发者工具里的设备模拟只是参考，真机才靠谱。手指点得中按钮吗？字号够大吗？表格会不会溢出？这些在模拟器里看不出来。至少找一台安卓一台苹果试一遍。

几个坑提前说。别用绝对定位做主要布局，手机上全乱。字号别用固定像素，用rem，跟着根字号走。视频和iframe记得也加上max-width，不然早晚出事。

最后，响应式不是做完就完。你在电脑上拉窄浏览器窗口，看页面怎么变，跟手机上看到的差不多。养成边改边缩窗口的习惯，问题当场就发现。

这套流程走下来，一个像样的响应式网站就出来了。不难，难的是管住手，别写死宽度。