做网站，先别急着写代码罢了。你得想清楚一件事：用户拿什么看你的网站？手机、平板、笔记本，屏幕大小差远了。响应式网站就是让同一个网站在不同屏幕上自动调整，看着都舒服。

第一步，加个meta标签。这行代码放head里：

没它，手机浏览器会把页面缩成一小块，字小得没法看。

第二步，别用固定宽度。以前流行写width:960px，现在扔了。改用百分比或者max-width。比如容器写max-width:1200px，再加个margin:0 auto居中。屏幕窄了，容器自动缩。

第三步，图片要听话。给img加一句max-width:100%; height:auto; 图片就不会撑破手机屏幕。想再省事，用srcset给不同屏幕准备不同尺寸的图，手机下小图，省流量。

第四步，布局用flex或者grid。别再用float硬凑。导航栏用flex，小屏幕自动换行。三栏布局用grid，手机上一栏，平板上两栏，电脑上三栏。媒体查询是开关：

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

大括号里写小屏幕的样式，改字号、改排列、藏掉不重要的装饰图。

第五步，字体别写死。正文字号用rem，1rem跟着根字号走。小屏幕根字号设14px，大屏幕设16px。行高给1.5到1.7之间，读着不累。

第六步，触屏友好。按钮别太小，至少44像素见方。手指头粗，点错了烦人。链接之间的间距留够。

第七步，测试。电脑上把浏览器窗口拖窄，看布局崩不崩。再用手机真机打开，横屏竖屏都试试。别只信开发者工具，真机手感不一样。

最后提醒一句：响应式不是万能药。表格特别复杂、交互特别重的后台系统，做响应式费劲。普通展示型网站、博客、企业官网，按上面七步走，够用了。

先做手机版，再往大屏幕扩。这叫移动优先，省得你写完电脑版再拆，越拆越乱。