先说说为什么要做响应式哟。现在人玩手机多，你网站电脑上好看，手机上一打开字挤成一团，人家扭头就走。响应式说白了就一句话：同一个网页，屏幕大就多摆点，屏幕小就少摆点，别让用户左右横拖。

第一步，加一行标签。打开HTML文件，在head里写：

没这行，手机浏览器会假装自己是电脑，把页面缩成一小块。加了，它才知道按真实屏幕宽度来。

第二步，别写死宽度。新手最容易犯的错是给盒子写固定像素，比如width: 960px。手机屏才375像素宽，直接撑爆。换成百分比或者max-width。图片也一样，加一句img { max-width: 100%; height: auto; }，图就跟着容器缩。

第三步，用媒体查询分档。这是响应式的核心。在CSS末尾写：

@media (max-width: 768px) { ... }

意思是屏幕窄于768像素时，花括号里的样式生效。常见的做法是：电脑上三栏，平板上两栏，手机上变一栏。导航栏在电脑上横着排，手机上就藏起来，换成一个菜单按钮。别搞太复杂，两三档断点足够，多了自己都记不住。

第四步，字号和留白跟着变。手机上看，16px的行高配1.5左右舒服。别在手机上还留大边距，浪费地方。按钮至少44像素高，手指头点得准。

第五步，拿真手机试。电脑上把浏览器窗口拖窄只是模拟，不靠谱。做完拿自己的手机打开看看，重点看三处：字会不会太小、按钮好不好点、有没有横向滚动条。有滚动条，基本就是某块宽度写死了，找出来改掉。

还有个笨办法很管用：写完每一块，就把窗口从宽拖到窄，看它在哪一步开始难看，就在那一步加断点。别一开始就想着把所有尺寸都适配好，那不可能。

最后一点提醒一句，响应式不是把电脑版硬塞进手机。手机上该藏的藏，该删的删。一屏放不下就让它往下滚，用户不怕滚，怕的是看不清、点不着。

照这五步走一遍，你的网站至少能在手机上看顺眼了。剩下的，就是多改多试。