做网站先别急着写代码啦。打开你电脑上的浏览器，把窗口慢慢拉窄。如果网页跟着变、不乱跑、不用左右拖，这站就算摸着响应式的门了。

第一步，加一行meta。在head里塞进viewport标签，告诉手机别把网页缩成蚂蚁大小。这行不加，后面全白搭。

第二步，别写死宽度。很多人习惯给盒子定个1200px，手机屏才375px，直接撑爆。换成百分比或者max-width，让盒子自己缩。图片也一样，加一句max-width:100%，高度自动，它就不会横着冲出去。

第三步，用媒体查询切布局。桌面端一行放三列，手机上一列就够。写个@media (max-width: 768px)，把三列改成单列，字号稍微调小。断点不用记太多，768和480两个够用了，边拉窗口边调。

第四步，导航栏单独处理。电脑上横着排，手机上塞进汉堡菜单。别搞复杂，一个按钮加一小段JS切换显示就行。记住手指比鼠标粗，按钮至少44像素高，不然点不准。

第五步，测试。别只在自己手机上试。浏览器开发者工具里有设备模拟，把iPhone、安卓小屏、平板都过一遍。重点看三处：文字有没有溢出、按钮好不好点、图片有没有变形。

最后说个实在话。响应式不是非得用框架。Bootstrap能省事，但自己写几行CSS更清楚在干嘛。先从最简单的流式布局开始，跑通了再加媒体查询。别一上来就搞栅格系统，容易晕。

做完拿给爸妈看。他们用手机打开，要是没问你“这网页咋回事”，就说明成了。